From e23bac47baca565315ffc79b9c1a1aad7aa110bb 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>