Add full-screen loader for redirects

diff --git a/index.html b/index.html
index 8bb53417958a17ae57a377eebf7971916f347a6d..e639d8ae68bdf362bf462dd360ee6ae548e9d8a9 100644 (file)
--- a/index.html
+++ b/index.html
@@ -15,6 +15,35 @@
   <link rel="icon" href="data:,">
   <link rel="stylesheet" href="style.css">
   <title>alu.bz</title>
+  <style>
+    .loader-block {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      inline-size: 100dvi;
+      block-size: 100dvb;
+      background: inherit;
+      display: grid;
+      place-items: center;
+    }
+
+    @keyframes spin {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    .loader {
+      width: 128px;
+      height: 128px;
+      color: transparent;
+      border: 8px solid transparent;
+      border-block-start: 8px solid black;
+      border-radius: 50%;
+      animation: spin 1s infinite;
+    }
+  </style>
   <script>
     (async () => {
       if (location.pathname !== '' && location.pathname !== '/') {
@@ -25,6 +54,10 @@
 </head>
 
 <body>
+  <div class="loader-block">
+    <div class="loader"></div>
+  </div>
+
   <header>
     <h1>alu.bz</h1>
     <nav>

diff --git a/script.js b/script.js
index 8b94864c8a54667e6c0ec58f069eeb7945d8efd3..c1eb0ffc60c49d68f9575cc1effc0845597a30e8 100644 (file)
--- a/script.js
+++ b/script.js
@@ -129,4 +129,7 @@ form.addEventListener('submit', handleSubmit);
 
 infoButton.addEventListener('click', () => {
   infoDialog.showModal();
-});
\ No newline at end of file
+});
+
+// Remove the full-screen loader
+document.querySelector('div.loader-block').remove();