From a53c01ab8ed02f9f203674364e71e5fe80e51d7e Mon Sep 17 00:00:00 2001 From: vato007 Date: Tue, 8 Jul 2025 18:13:15 +0930 Subject: [PATCH] Add loading spinner for slow duck init --- src/index.html | 23 ++++++++++++----------- src/styles.scss | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+), 11 deletions(-) diff --git a/src/index.html b/src/index.html index dd9b143..63dac7e 100644 --- a/src/index.html +++ b/src/index.html @@ -10,18 +10,19 @@ rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=close,mediation" /> - - + + +
+
+
+
+
+
+
+
Loading Ingey
+
+ diff --git a/src/styles.scss b/src/styles.scss index b1d5ad9..dcaa183 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -11,3 +11,52 @@ html { p-scroller { height: 100%; } + +.material-symbols-outlined { + font-variation-settings: + "FILL" 0, + "wght" 400, + "GRAD" 0, + "opsz" 20; + font-size: 1rem; +} + +.lds-ring, +.lds-ring div { + box-sizing: border-box; +} +.lds-ring { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-ring div { + box-sizing: border-box; + display: block; + position: absolute; + width: 64px; + height: 64px; + margin: 8px; + border: 8px solid currentColor; + border-radius: 50%; + animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + border-color: currentColor transparent transparent transparent; +} +.lds-ring div:nth-child(1) { + animation-delay: -0.45s; +} +.lds-ring div:nth-child(2) { + animation-delay: -0.3s; +} +.lds-ring div:nth-child(3) { + animation-delay: -0.15s; +} +@keyframes lds-ring { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +}