page loader imp

Author: VJAI

src/detail.html

@@ -1263,17 +1263,6 @@ <h3>Lorem ipsum dolor sit amet</h3>
 <script src="//cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/languages/javascript.min.js"></script>
-<script>
-  WebFont.load({
-    google: {
-      families: ['JetBrains Mono']
-    },
-    timeout: 5000,
-    fontactive: function () {
-      hljs && hljs.highlightAll();
-    }
-  });
-</script>
 <script src="fibonacci.js"></script>
 </body>
 </html>

src/index.html

@@ -570,17 +570,6 @@ <h4>
 <script src="//cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/languages/javascript.min.js"></script>
-<script>
-  WebFont.load({
-    google: {
-      families: ['JetBrains Mono']
-    },
-    timeout: 5000,
-    fontactive: function () {
-      hljs && hljs.highlightAll();
-    }
-  });
-</script>
 <script src="fibonacci.js"></script>
 </body>
 </html>

src/js/boot.js

@@ -84,4 +84,14 @@ export function init() {
   }
 
   mediaChangeHandler(mediaQuery);
+
+  WebFont.load({
+    google: {
+      families: ['JetBrains Mono']
+    },
+    timeout: 5000,
+    fontactive: function () {
+      hljs && hljs.highlightAll();
+    }
+  });
 }

src/scss/site/_animations.scss

@@ -1,4 +1,4 @@
-@keyframes arrow-move-left {
+@keyframes anim__arrow-move-left {
   0% {
     left: 0;
   }
@@ -10,7 +10,7 @@
   }
 }
 
-@keyframes arrow-move-right {
+@keyframes anim__arrow-move-right {
   0% {
     right: 0;
   }

src/scss/site/_article.scss

@@ -274,7 +274,7 @@ a.cmp__article-continue-reading {
   }
 
   &:hover:after {
-    animation: arrow-move-right fibVars.$medium-speed linear infinite;
+    animation: anim__arrow-move-right fibVars.$medium-speed linear infinite;
   }
 }
 

src/scss/site/_page-loader.scss

@@ -1,8 +1,11 @@
 @use '../base/variables' as fibVars;
 @use '../base/mixins' as fibMixins;
+@use '../base/funcs' as fibFuncs;
 @use 'variables' as fibSiteVars;
 
 .cmp__page-loader {
+  $stripe: #{darken(fibVars.$brand-bg, 2%)};
+
   position: fixed;
   z-index: 200;
   top: 0;
@@ -11,7 +14,13 @@
   min-height: 100vh;
   opacity: 1;
   transition: all fibVars.$medium-speed ease-in;
-  background: url('#{fibVars.$assets-path}/background-dark.png') fibVars.$brand-bg;
+
+  background: linear-gradient(135deg, fibVars.$brand-bg 25%, transparent 25%) -50px 0,
+    linear-gradient(225deg, fibVars.$brand-bg 25%, transparent 25%) -50px 0,
+    linear-gradient(315deg, fibVars.$brand-bg 25%, transparent 25%),
+    linear-gradient(45deg, fibVars.$brand-bg 25%, transparent 25%);
+  background-size: 100px 100px;
+  background-color: $stripe;
 
   .cmp__loader-container {
     @include fibMixins.flex_init($column: true, $center: true);
@@ -30,6 +39,49 @@
       }
       letter-spacing: fibVars.$medium-letter-spacing;
       color: fibVars.$dim-gray;
+      animation: anim__text-glow fibVars.$snail-speed infinite;
     }
   }
+}
+
+@keyframes anim__text-glow {
+  0% {
+    text-shadow: fibVars.$white 0 0 2px;
+  }
+  50% {
+    text-shadow: fibVars.$white 0 0 10px;
+  }
+  100% {
+    text-shadow: fibVars.$white 0 0 2px;
+  }
+}
+
+@keyframes anim__path-glow {
+  0% {
+    filter: drop-shadow(0 0 2px fibVars.$white);
+  }
+  50% {
+    filter: drop-shadow(0 0 6px fibVars.$white);
+  }
+  100% {
+    filter: drop-shadow(0 0 2px fibVars.$white);
+  }
+}
+
+@keyframes anim__random {
+  0% {
+    background-image: linear-gradient(90deg, #fb3 11px, transparent 0),
+      linear-gradient(90deg, #ab4 23px, transparent 0),
+      linear-gradient(90deg, #655 41px, transparent 0);
+  }
+  50% {
+    background-image: linear-gradient(90deg, #ab4 11px, transparent 0),
+    linear-gradient(90deg, #655 23px, transparent 0),
+    linear-gradient(90deg, #fb3 41px, transparent 0);
+  }
+  100% {
+    background-image: linear-gradient(90deg, #fb3 11px, transparent 0),
+    linear-gradient(90deg, #ab4 23px, transparent 0),
+    linear-gradient(90deg, #655 41px, transparent 0);
+  }
 }

src/scss/site/_pagination.scss

@@ -25,7 +25,7 @@
       }
 
       &:hover:before {
-        animation: arrow-move-left fibVars.$medium-speed linear infinite;
+        animation: anim__arrow-move-left fibVars.$medium-speed linear infinite;
       }
     }
   }
@@ -41,7 +41,7 @@
       }
 
       &:hover:after {
-        animation: arrow-move-right fibVars.$medium-speed linear infinite;
+        animation: anim__arrow-move-right fibVars.$medium-speed linear infinite;
       }
     }
   }

src/scss/site/_site.scss

@@ -13,6 +13,9 @@ html, body {
   background: url('#{fibVars.$assets-path}/background-dark.png') fibVars.$brand-bg;
 
   &.cmp__site-loading {
+    position: static;
+    overflow: hidden;
+
     .cmp__page-loader {
       display: block;
     }

src/scss/site/pages/_contact.scss

@@ -33,7 +33,7 @@
 
           &:hover {
             cmp-icon {
-              animation: arrow-move-up-right fibVars.$medium-speed linear infinite;
+              animation: anim__arrow-move-up-right fibVars.$medium-speed linear infinite;
             }
           }
 
@@ -46,7 +46,7 @@
   }
 }
 
-@keyframes arrow-move-up-right {
+@keyframes anim__arrow-move-up-right {
   0% {
     top: 0;
     right: 0;