Re-styled/sized/colored loading spinner to look better ↞ [auto-sync from https://github.com/KudoAI/chatgpt.js-chrome-starter]

Author: kudo-sync-bot

starters/chrome/extension/popup/style.css

@@ -11,14 +11,28 @@ body, button, input, select, textarea {
 a { color: #999 ; text-decoration: none }
 a:focus, a:hover { text-decoration: underline ; color: inherit }
 
-/* Loading elems */
-.loading-bg { background-color: white ; width: 100% ; height: 100% ; position: absolute ; z-index: 1111; }
+/* Loader */
+.loading-bg {
+    background-color: white ; width: 100% ; height: 100% ; position: absolute ; z-index: 1111 ;
+    display: inline-grid ; align-content: center ; justify-content: center /* center spinner */
+}
 .loading-spinner {
-    border: 8px solid #f3f3f3 ; border-top: 8px solid #3498db ; border-radius: 50% ;
-    width: 15vh ; height: 15vh ; animation: spin 1s linear infinite ;
-    position: absolute ; top: calc(50% - 7.5vh - 8px) ; left: calc(50% - 7.5vh)
+    width: 11px ; aspect-ratio: 1 ; border-radius: 50% ; border: 5px solid #000 ;
+    animation: loader-move-head-tail 0.8s infinite linear alternate, loader-rotate 1.6s infinite linear
+}
+@keyframes loader-move-head-tail {
+     0% { clip-path: polygon(50% 50%, 0 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0) }
+     12.5% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 0, 100% 0, 100% 0) }
+     25% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%) }
+     50% { clip-path: polygon(50% 50%, 0 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 0 100%) }
+     62.5% { clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%) }
+     75% { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0 100%) }
+     100% { clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%) }
 }
-@keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) }}
+@keyframes loader-rotate { 
+    0% { transform: scaleY(1) rotate(0deg) } 49.99% { transform: scaleY(1) rotate(135deg) }
+    50% { transform: scaleY(-1) rotate(0deg) } 100% { transform: scaleY(-1) rotate(-135deg) }
+}  
 
 /* Header */
 .menu-header {