enhance(client): show loading icon on splash screen

Close #8481

1 files changed, 46 insertions, 1 deletions

diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css
index 43fbe1ab06..9c4cd4b9bf 100644
--- a/packages/backend/src/server/web/style.css
+++ b/packages/backend/src/server/web/style.css
@@ -16,7 +16,7 @@ html {
 	transition: opacity 0.5s ease;
 }
 
-#splash > img {
+#splashIcon {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -27,3 +27,48 @@ html {
 	height: 64px;
 	pointer-events: none;
 }
+
+#splashSpinner {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	margin: auto;
+	display: inline-block;
+	width: 28px;
+	height: 28px;
+	transform: translateY(70px);
+}
+
+#splashSpinner:before,
+#splashSpinner:after {
+	content: " ";
+	display: block;
+	box-sizing: border-box;
+	width: 28px;
+	height: 28px;
+	border-radius: 50%;
+	border: solid 4px;
+}
+
+#splashSpinner:before {
+	border-color: currentColor;
+	opacity: 0.3;
+}
+
+#splashSpinner:after {
+	position: absolute;
+	top: 0;
+	border-color: currentColor transparent transparent transparent;
+	animation: splashSpinner 0.5s linear infinite;
+}
+
+@keyframes splashSpinner {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}