Animate dots a loading indicator

aaronlidman · aaronlidman · commit 980206193a85 · 2025-12-15T20:30:09.000-08:00
diff --git a/css/site.css b/css/site.css
@@ -161,6 +161,18 @@ h1 {
     z-index: 999;
 }
 
+.loading-dots::after {
+    content: "";
+    animation: loading-dots 2.5s steps(1) infinite;
+}
+
+@keyframes loading-dots {
+    0% { content: ""; }
+    20% { content: "."; }
+    40% { content: ".."; }
+    60% { content: "..."; }
+}
+
 .fade-out {
     opacity: 0;
     transition: var(--fadeTransition);
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 <body>
 <div class='container'>
     <div id='loading'>
-        <h1>Loading...</h1>
+        <h1>Loading<span class="loading-dots"></span></h1>
     </div>
     <div id='main' class='full-height'>
         <div class='overlay'>
