From e166ad678014585c12c779bc2d72e82a366362e6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 9 Jun 2018 10:06:27 +0900
Subject: [PATCH] Better init screen

---
 src/client/app/base.pug |  8 ++++----
 src/client/app/init.css | 40 ++++++++++++++--------------------------
 2 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/src/client/app/base.pug b/src/client/app/base.pug
index a77a8a9595..11b150bc67 100644
--- a/src/client/app/base.pug
+++ b/src/client/app/base.pug
@@ -42,7 +42,7 @@ html
 			| JavaScriptを有効にしてください
 			br
 			| Please turn on your JavaScript
-		div#ini: p
-			span .
-			span .
-			span .
+		div#ini.
+			<svg viewBox="0 0 50 50">
+				<path fill=#{themeColor} d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" />
+			</svg>
diff --git a/src/client/app/init.css b/src/client/app/init.css
index fa59195f71..6ee25d64e2 100644
--- a/src/client/app/init.css
+++ b/src/client/app/init.css
@@ -32,42 +32,30 @@ body > noscript {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	text-align: center;
 	background: #fff;
 	cursor: wait;
 }
-	#ini > p {
-		display: block;
-		user-select: none;
-		margin: 32px;
-		font-size: 4em;
-		color: #555;
+	#ini > svg {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		margin: auto;
+		width: 64px;
+		height: 64px;
+		animation: ini 0.6s infinite linear;
 	}
-		#ini > p > span {
-			animation: ini 1.4s infinite ease-in-out both;
-		}
-		#ini > p > span:nth-child(1) {
-			animation-delay: 0s;
-		}
-		#ini > p > span:nth-child(2) {
-			animation-delay: 0.16s;
-		}
-		#ini > p > span:nth-child(3) {
-			animation-delay: 0.32s;
-		}
 
 html[data-darkmode] #ini {
 	background: #191b22;
 }
-	html[data-darkmode] #ini > p {
-		color: #fff;
-	}
 
 @keyframes ini {
-	0%, 80%, 100% {
-		opacity: 1;
+	from {
+		transform: rotate(0deg);
 	}
-	40% {
-		opacity: 0;
+	to {
+		transform: rotate(360deg);
 	}
 }