preloader updated with a custom one

ieeelink · Mar 20, 2023 · 3e214cd · 3e214cd
1 parent b62cf28
commit 3e214cd
Show file tree

Hide file tree

Showing 9 changed files with 273 additions and 95 deletions.
diff --git a/public/javascripts/main.js b/public/javascripts/main.js
@@ -1,15 +1,30 @@
-/**
-* Template Name: Gp - v4.7.0
-* Template URL: https://bootstrapmade.com/gp-free-multipurpose-html-bootstrap-template/
-* Author: BootstrapMade.com
-* License: https://bootstrapmade.com/license/
-*/
 (function () {
     "use strict";
 
-    /**
-     * Easy selector helper function
-     */
+    window.addEventListener('load', () => {
+        setTimeout(() => {
+            $("#circle").removeClass("rotate");
+            $("#launcher").removeClass("launch");
+            setTimeout(() => {
+                $("#loader").addClass("rotate");
+                setTimeout(() => {
+                    $("#launcher").addClass("launch");
+                    setTimeout(() => {
+                        $("#body").removeClass("mask");
+                        setTimeout(() => {
+                            $("#body").css({ "height": "auto", });
+                            $("#launchpad").css({ "display": "block", });
+                            setTimeout(() => {
+                                $("#hero_text").css({ "opacity": "1", });
+                            }, 1000)
+                        }, 500)
+                    }, 100)
+
+                }, 1500)
+            }, 1000)
+        }, 4000)
+    });
+
     const select = (el, all = false) => {
         el = el.trim()
         if (all) {
@@ -157,12 +172,6 @@
     /**
      * Preloader
      */
-    let preloader = select('#preloader');
-    if (preloader) {
-        window.addEventListener('load', () => {
-            preloader.remove()
-        });
-    }
 
     /**
      * Clients Slider

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -86,46 +86,82 @@ html::-webkit-scrollbar-thumb {
 }
 #preloader {
   position: fixed;
+  width: 100%;
+  height: 100vh;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 9999;
-  overflow: hidden;
-  background: #040404;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #0c0c0c;
+  z-index: -1;
+  mask-image: url(#Layer_2);
 }
-
-#preloader:before {
-  content: "";
-  position: fixed;
-  top: calc(50% - 0px);
-  left: calc(50% - 30px);
-  border: 6px solid #FC862B;
-  border-top-color: #151515;
-  border-bottom-color: #151515;
-  border-radius: 50%;
-  width: 60px;
-  height: 60px;
-  -webkit-animation: animate-preloader 1s linear infinite;
-  animation: animate-preloader 1s linear infinite;
+#preloader #loader {
+  display: block;
+  position: relative;
+  width: 5rem;
+  height: 5rem;
+  overflow: visible;
+  transition: all 1.5s ease;
+}
+#preloader #loader #launcher {
+  position: absolute;
+  overflow: visible;
+  transform: translate(0%, -16.5%);
+  transition: all 0.5s ease;
+}
+#preloader #loader #launcher .rocket,
+#preloader #loader #launcher .rectangle {
+  fill: #FC862B;
+  transition: all 0.5s ease;
+}
+#preloader #loader #launcher.launch {
+  opacity: 0;
+}
+#preloader #loader #launcher.launch .rocket {
+  transform: translateY(-50%);
+}
+#preloader #loader #launcher.launch .rectangle {
+  transform: translateY(50%);
+}
+#preloader #loader #circle {
+  position: absolute;
+  overflow: visible;
+  transition: all 0.3s ease;
+}
+#preloader #loader #circle .ring {
+  fill: #fff;
+  transform-origin: center;
+}
+#preloader #loader #circle.rotate {
+  transition: all 0.3s ease;
+  animation: rotate 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
+}
+#preloader #loader.rotate {
+  transform: rotate(45deg);
 }
 
-@-webkit-keyframes animate-preloader {
+@keyframes rotate {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }
-@keyframes animate-preloader {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+#body {
+  overflow: hidden;
+  height: 100vh;
+  clip-path: circle(100% at center);
+  transition: all 1s ease;
+}
+#body.mask {
+  clip-path: circle(0% at center);
 }
+
 /*--------------------------------------------------------------
   # Header
   --------------------------------------------------------------*/
@@ -449,6 +485,14 @@ html::-webkit-scrollbar-thumb {
   box-shadow: inset 0 0 0 2000px rgba(39, 39, 39, 0.25);
   position: relative;
 }
+#hero #launchpad {
+  display: none;
+  transition: all 0.5s ease;
+}
+#hero #hero_text {
+  opacity: 0;
+  transition: all 1s ease;
+}
 #hero .wave {
   height: 10rem;
   display: flex;
@@ -1062,7 +1106,7 @@ section {
   height: 40px;
 }
 #timeline .timeline hr {
-  height: 2px;
+  height: 2.5px;
   background-color: #FC862B;
   opacity: 1;
   margin: 0;

diff --git a/scss/partials/_hero.scss b/scss/partials/_hero.scss
@@ -9,6 +9,16 @@
   box-shadow: inset 0 0 0 2000px rgba($color: #272727, $alpha: 0.25);
   position: relative;
 
+  #launchpad{
+    display: none;
+    transition: all 0.5s ease;
+  }
+
+  #hero_text{
+    opacity: 0;
+    transition: all 1s ease;
+  }
+
   .wave {
     height: 10rem;
     display: flex;

diff --git a/scss/partials/_preloader.scss b/scss/partials/_preloader.scss
@@ -1,30 +1,120 @@
+// #preloader {
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     right: 0;
+//     bottom: 0;
+//     z-index: 9999;
+//     overflow: hidden;
+//     background: #040404;
+// }
+
+// #preloader:before {
+//     content: "";
+//     position: fixed;
+//     top: calc(50% - 0px);
+//     left: calc(50% - 30px);
+//     border: 6px solid $color1;
+//     border-top-color: $dark_color_1;
+//     border-bottom-color: $dark_color_1;
+//     border-radius: 50%;
+//     width: 60px;
+//     height: 60px;
+//     -webkit-animation: animate-preloader 1s linear infinite;
+//     animation: animate-preloader 1s linear infinite;
+// }
+
+// @-webkit-keyframes animate-preloader {
+//     0% {
+//         transform: rotate(0deg);
+//     }
+
+//     100% {
+//         transform: rotate(360deg);
+//     }
+// }
+
+// @keyframes animate-preloader {
+//     0% {
+//         transform: rotate(0deg);
+//     }
+
+//     100% {
+//         transform: rotate(360deg);
+//     }
+// }
+
 #preloader {
     position: fixed;
+    width: 100%;
+    height: 100vh;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 9999;
-    overflow: hidden;
-    background: #040404;
-}
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #0c0c0c;
+    z-index: -1;
+    mask-image: url(#Layer_2);;
 
-#preloader:before {
-    content: "";
-    position: fixed;
-    top: calc(50% - 0px);
-    left: calc(50% - 30px);
-    border: 6px solid $color1;
-    border-top-color: $dark_color_1;
-    border-bottom-color: $dark_color_1;
-    border-radius: 50%;
-    width: 60px;
-    height: 60px;
-    -webkit-animation: animate-preloader 1s linear infinite;
-    animation: animate-preloader 1s linear infinite;
+    #loader {
+        display: block;
+        position: relative;
+        width: 5rem;
+        height: 5rem;
+        overflow: visible;
+
+        #launcher {
+            position: absolute;
+            overflow: visible;
+
+            transform: translate(0%, -16.5%);
+
+            .rocket,
+            .rectangle {
+                fill: $color1;
+                transition: all 0.5s ease;
+            }
+            transition: all 0.5s ease;
+
+            &.launch{
+                opacity: 0;
+                .rocket{
+                    transform: translateY(-50%);
+                }
+                .rectangle{
+                    transform: translateY(50%);
+                }
+            }
+        }
+
+        #circle {
+            position: absolute;
+            overflow: visible;
+
+            .ring {
+                fill: $white;
+                transform-origin: center;
+            }
+
+            transition: all 0.3s ease;
+            &.rotate {
+                transition: all 0.3s ease;
+                animation: rotate 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
+            }
+        }
+
+        transition: all 1.5s ease;
+
+        &.rotate{
+            transform: rotate(45deg);
+        }
+    }
 }
 
-@-webkit-keyframes animate-preloader {
+@keyframes rotate {
     0% {
         transform: rotate(0deg);
     }
@@ -34,12 +124,14 @@
     }
 }
 
-@keyframes animate-preloader {
-    0% {
-        transform: rotate(0deg);
-    }
 
-    100% {
-        transform: rotate(360deg);
+#body{
+    overflow: hidden;
+    height: 100vh;
+    clip-path: circle(100% at center);
+    transition: all 1s ease;
+
+    &.mask{
+        clip-path: circle(0% at center);
     }
 }
diff --git a/scss/style.scss b/scss/style.scss
@@ -580,7 +580,7 @@ section {
 
     .timeline hr {
         // border-top: 3px solid $color1;
-        height: 2px;
+        height: 2.5px;
         background-color: $color1;
         opacity: 1;
         margin: 0;