improve loader

1 files changed, 16 insertions, 10 deletions

diff --git a/style.css b/style.css
index 47f6315..0e2bb9d 100644
--- a/style.css
+++ b/style.css
@@ -26,6 +26,7 @@ main {
 }
 section {
   flex: 1;
+  position: relative;
 }
 section > div {
   height: 100%;
@@ -72,6 +73,21 @@ nav a:hover:not(.active) {
   color: white;
 }
 
+#loader {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: grid;
+  text-align: center;
+  align-content: center;
+  background: rgba(0,0,0,0.5);
+}
+#loader.hidden {
+  display: none;
+}
+
 @media (max-width: 900px) {
   .container, nav {
     width: 100%;
@@ -90,16 +106,6 @@ nav a:hover:not(.active) {
   }
 }
 
-.grid {
-  display: grid;
-}
-.center {
-  text-align: center;
-}
-.middle {
-  align-content: center;
-}
-
 .loadspin {
   display: inline-block;
   pointer-events: none;