Merge pull request #12 from ansh-saini/main

feat: add loader
anup-a · Oct 17, 2020 · fc0e34a · fc0e34a · vercel · Oct 17, 2020
2 parents 093ed66 + 1c5ad1e
commit fc0e34a
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 1 deletion.
diff --git a/src/components/home.jsx b/src/components/home.jsx
@@ -106,7 +106,11 @@ function Home({ isDark, toggleDarkMode }) {
           />
         </div>
         <div className="z-20 flex h-12 text-lg font-bold text-black footer dark:text-white">
-          Made with ❤ - by <a href="https://www.anup.tech" className="ml-2 underline"> Anup</a>
+          Made with ❤ - by{' '}
+          <a href="https://www.anup.tech" className="ml-2 underline">
+            {' '}
+            Anup
+          </a>
         </div>
       </div>
     </div>

diff --git a/src/index.html b/src/index.html
@@ -42,6 +42,7 @@
     />
     <meta property="twitter:image" content="./assets/bg.png" />
     <link rel="shortcut icon" href="./assets/3-01.svg" />
+    <link rel="stylesheet" href="/styles/loader.css" />
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script
@@ -60,5 +61,23 @@
   </head>
   <body>
     <div id="app"></div>
+    <div class="loader-container">
+      <div class="loader"></div>
+    </div>
   </body>
+
+  <script>
+    document.onreadystatechange = function () {
+      const state = document.readyState
+      if (state === 'interactive') {
+        document.querySelector('#app').style.display = 'none'
+      } else if (state === 'complete') {
+        // setTimeout can be used to test the loader.
+        // setTimeout(function () {
+        document.querySelector('.loader-container').style.display = 'none'
+        document.querySelector('#app').style.display = 'block'
+        // }, 3000)
+      }
+    }
+  </script>
 </html>
diff --git a/src/styles/loader.css b/src/styles/loader.css
@@ -0,0 +1,56 @@
+.loader-container {
+  width: 100%;
+  height: 100vh;
+  background-color: #eee;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loader {
+  width: 100px;
+  height: 100px;
+  background-color: #4de6d4;
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+}
+
+.loader:after {
+  content: '';
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background-color: #fff;
+}
+
+.loader:before {
+  content: '';
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background-color: #fff;
+}
+
+.loader:before {
+  top: -40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.7);
+  animation: wave 5s linear infinite;
+}
+
+.loader:after {
+  top: -40px;
+  border-radius: 30%;
+  background: rgba(255, 255, 255, 0.3);
+  animation: wave 5s linear infinite;
+}
+
+@keyframes wave {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}