1 files changed, 20 insertions, 119 deletions
diff --git a/web/index.templ b/web/index.templ
index 8aa626c..1899ae3 100644
--- a/web/index.templ
+++ b/web/index.templ
@@ -27,120 +27,28 @@ templ base(title string, body templ.Component) {
       text-align: center;
     }
 
-    .lds-roller,
-    .lds-roller div,
-    .lds-roller div:after {
-      box-sizing: border-box;
+    #status {
+      font-variant-numeric: tabular-nums;
     }
 
-    .lds-roller {
-      display: inline-block;
-      position: relative;
-      width: 80px;
-      height: 80px;
+    #progress {
+      display: none;
+      width: min(20rem, 90%);
+      height: 2rem;
+      border-radius: 1rem;
+      overflow: hidden;
+      margin: 1rem 0 2rem;
+      outline-color: #b16286;
+      outline-offset: 2px;
+      outline-style: solid;
+      outline-width: 4px;
     }
 
-    .lds-roller div {
-      animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-      transform-origin: 40px 40px;
-    }
-
-    .lds-roller div:after {
-      content: " ";
-      display: block;
-      position: absolute;
-      width: 7.2px;
-      height: 7.2px;
-      border-radius: 50%;
-      background: currentColor;
-      margin: -3.6px 0 0 -3.6px;
-    }
-
-    .lds-roller div:nth-child(1) {
-      animation-delay: -0.036s;
-    }
-
-    .lds-roller div:nth-child(1):after {
-      top: 62.62742px;
-      left: 62.62742px;
-    }
-
-    .lds-roller div:nth-child(2) {
-      animation-delay: -0.072s;
-    }
-
-    .lds-roller div:nth-child(2):after {
-      top: 67.71281px;
-      left: 56px;
-    }
-
-    .lds-roller div:nth-child(3) {
-      animation-delay: -0.108s;
-    }
-
-    .lds-roller div:nth-child(3):after {
-      top: 70.90963px;
-      left: 48.28221px;
-    }
-
-    .lds-roller div:nth-child(4) {
-      animation-delay: -0.144s;
-    }
-
-    .lds-roller div:nth-child(4):after {
-      top: 72px;
-      left: 40px;
-    }
-
-    .lds-roller div:nth-child(5) {
-      animation-delay: -0.18s;
-    }
-
-    .lds-roller div:nth-child(5):after {
-      top: 70.90963px;
-      left: 31.71779px;
-    }
-
-    .lds-roller div:nth-child(6) {
-      animation-delay: -0.216s;
-    }
-
-    .lds-roller div:nth-child(6):after {
-      top: 67.71281px;
-      left: 24px;
-    }
-
-    .lds-roller div:nth-child(7) {
-      animation-delay: -0.252s;
-    }
-
-    .lds-roller div:nth-child(7):after {
-      top: 62.62742px;
-      left: 17.37258px;
-    }
-
-    .lds-roller div:nth-child(8) {
-      animation-delay: -0.288s;
-    }
-
-    .lds-roller div:nth-child(8):after {
-      top: 56px;
-      left: 12.28719px;
-    }
-
-    .mx-auto {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    @keyframes lds-roller {
-      0% {
-        transform: rotate(0deg);
-      }
-
-      100% {
-        transform: rotate(360deg);
-      }
+    .bar-inner {
+      background-color: #b16286;
+      height: 100%;
+      width: 0;
+      transition: width 0.25s ease-in;
     }
       </style>
 			@templ.JSONScript("anubis_version", anubis.Version)
@@ -181,15 +89,8 @@ templ index() {
 		/>
 		<p id="status">Loading...</p>
 		<script async type="module" src={ "/.within.website/x/cmd/anubis/static/js/main.mjs?cacheBuster=" + anubis.Version }></script>
-		<div id="spinner" class="lds-roller mx-auto" style="display:none;">
-			<div></div>
-			<div></div>
-			<div></div>
-			<div></div>
-			<div></div>
-			<div></div>
-			<div></div>
-			<div></div>
+		<div id="progress" role="progressbar" aria-labelledby="status">
+			<div class="bar-inner"></div>
 		</div>
 		<details>
 			<summary>Why am I seeing this?</summary>