From 25374271b0c658801193fa206818fe1dac4d735c Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Mon, 10 Feb 2020 20:44:59 +0900 Subject: [PATCH] :art: --- src/client/components/loading.vue | 37 ++++++++++++++++++++++--------- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/src/client/components/loading.vue b/src/client/components/loading.vue index 88d1ed77f..1ba93f065 100644 --- a/src/client/components/loading.vue +++ b/src/client/components/loading.vue @@ -1,30 +1,47 @@ <template> <div class="yxspomdl"> - <fa :icon="faSpinner" pulse fixed-width class="icon"/> + <div class="ring"></div> </div> </template> <script lang="ts"> import Vue from 'vue'; -import { faSpinner } from '@fortawesome/free-solid-svg-icons'; export default Vue.extend({ - data() { - return { - faSpinner - }; - }, }); </script> <style lang="scss" scoped> +@keyframes ring { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + .yxspomdl { padding: 32px; text-align: center; - > .icon { - font-size: 32px; - opacity: 0.5; + > .ring { + display: inline-block; + width: 80px; + height: 80px; + opacity: 0.7; + } + + > .ring:after { + content: " "; + display: block; + width: 64px; + height: 64px; + margin: 8px; + border-radius: 50%; + border: solid 6px; + border-color: var(--fg) transparent transparent transparent; + animation: ring 0.5s linear infinite; } } </style>