diff options
| author | Kana <[email protected]> | 2020-12-24 21:41:24 +0900 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-12-24 21:41:24 +0900 |
| commit | 2412a60bd4cb2364a477a3af79a8c6dcb6b0ddab (patch) | |
| tree | dbf2b2cad342f31849a62089dedd40165758af86 /src/site/components/loading | |
| parent | Enable deleting files with the API key (diff) | |
| parent | bug: fix showlist resetting itself every time the page is changed (diff) | |
| download | host.fuwn.me-2412a60bd4cb2364a477a3af79a8c6dcb6b0ddab.tar.xz host.fuwn.me-2412a60bd4cb2364a477a3af79a8c6dcb6b0ddab.zip | |
Merge pull request #228 from Zephyrrus/begone_trailing_commas
Merge own dev branch into main dev branch
Diffstat (limited to 'src/site/components/loading')
| -rw-r--r-- | src/site/components/loading/BulmaLoading.vue | 33 | ||||
| -rw-r--r-- | src/site/components/loading/CubeShadow.vue | 3 | ||||
| -rw-r--r-- | src/site/components/loading/Origami.vue | 8 | ||||
| -rw-r--r-- | src/site/components/loading/PingPong.vue | 16 | ||||
| -rw-r--r-- | src/site/components/loading/RotateSquare.vue | 3 |
5 files changed, 51 insertions, 12 deletions
diff --git a/src/site/components/loading/BulmaLoading.vue b/src/site/components/loading/BulmaLoading.vue new file mode 100644 index 0000000..37cc5a5 --- /dev/null +++ b/src/site/components/loading/BulmaLoading.vue @@ -0,0 +1,33 @@ +<template> + <div class="loader-wrapper"> + <div class="loader is-loading" /> + </div> +</template> + +<style lang="scss" scoped> + .loader-wrapper { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background: #fff; + opacity: 0; + z-index: -1; + transition: opacity .3s; + display: flex; + justify-content: center; + align-items: center; + border-radius: 6px; + + .loader { + height: 80px; + width: 80px; + } + + &.is-active { + opacity: 1; + z-index: 1; + } + } +</style> diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue index af31dac..71b5da5 100644 --- a/src/site/components/loading/CubeShadow.vue +++ b/src/site/components/loading/CubeShadow.vue @@ -1,5 +1,6 @@ <template> - <div :style="styles" + <div + :style="styles" class="spinner spinner--cube-shadow" /> </template> diff --git a/src/site/components/loading/Origami.vue b/src/site/components/loading/Origami.vue index d1b523d..59c5d8f 100644 --- a/src/site/components/loading/Origami.vue +++ b/src/site/components/loading/Origami.vue @@ -1,7 +1,9 @@ <template> - <div :style="styles" + <div + :style="styles" class="spinner spinner-origami"> - <div :style="innerStyles" + <div + :style="innerStyles" class="spinner-inner loading"> <span class="slice" /> <span class="slice" /> @@ -23,7 +25,7 @@ export default { }, computed: { innerStyles() { - let size = parseInt(this.size); + const size = parseInt(this.size, 10); return { transform: `scale(${(size / 60)})` }; }, styles() { diff --git a/src/site/components/loading/PingPong.vue b/src/site/components/loading/PingPong.vue index ac33e28..c04ae72 100644 --- a/src/site/components/loading/PingPong.vue +++ b/src/site/components/loading/PingPong.vue @@ -1,12 +1,14 @@ <template> - <div :style="styles" + <div + :style="styles" class="spinner spinner--ping-pong"> - <div :style="innerStyles" + <div + :style="innerStyles" class="spinner-inner"> <div class="board"> - <div class="left"/> - <div class="right"/> - <div class="ball"/> + <div class="left" /> + <div class="right" /> + <div class="ball" /> </div> </div> </div> @@ -22,7 +24,7 @@ export default { }, computed: { innerStyles() { - let size = parseInt(this.size); + const size = parseInt(this.size, 10); return { transform: `scale(${size / 250})` }; }, styles() { @@ -32,7 +34,7 @@ export default { }; } } -} +}; </script> <style lang="scss" scoped> diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue index 4da8300..7bc9bb0 100644 --- a/src/site/components/loading/RotateSquare.vue +++ b/src/site/components/loading/RotateSquare.vue @@ -1,5 +1,6 @@ <template> - <div :style="styles" + <div + :style="styles" class="spinner spinner--rotate-square-2" /> </template> |