Loading page

tompointcom · Jun 13, 2024 · cf03a32 · cf03a32
1 parent eb76449
commit cf03a32
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -24,6 +24,12 @@
   </head>
 
   <body>
+
+    <!-- Loader-->
+
+    <div class="loader"></div>
+
+
     <!-- Header -->
 
     <header class="header">

diff --git a/sass/base/_animations.scss b/sass/base/_animations.scss
@@ -1,5 +1,28 @@
+// Loader 
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes visibility {
+  90%{
+      opacity: 1;
+  }
+  100%{
+      opacity: 0;
+  }
+}
+
+
+
+
+
+
+
+
 .btn-hover:hover {
-  // transition: all 300ms ease-in-out;
+
   background: $light-gradiant;
     p {
       transform: scale(1.02);

diff --git a/sass/layout/_loader.scss b/sass/layout/_loader.scss
@@ -0,0 +1,31 @@
+.loader {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 3;
+    width: 100vw;
+    height: 100vh;
+    @include flex-center;
+    background: $tertiary-color;
+    animation: visibility 2s ease forwards;
+  }
+
+  .loader-active {
+    display: flex;
+  }
+
+.loader::after {
+    content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        z-index: 1;
+        width: 120px;
+        height: 120px;
+        margin: -76px 0 0 -76px;
+        border: 16px solid #f3f3f3;
+        border-radius: 50%;
+        border-top: 16px solid #008766;
+        -webkit-animation: spin 2s linear infinite;
+        animation: spin 2s linear infinite;
+}  
diff --git a/sass/main.scss b/sass/main.scss
@@ -12,6 +12,7 @@
 @import 'layout/header';
 @import 'layout/main';
 @import 'layout/footer';
+@import 'layout/loader';
 
 @import 'pages/restaurants';
 

diff --git a/style/style.css b/style/style.css
diff --git a/style/style.css.map b/style/style.css.map