preloader

Author: ssagynbayeva

_layouts/default.html

@@ -26,19 +26,6 @@
     <link href="{{ site.baseurl }}/assets/css/style.css" rel="stylesheet">
 
 
-    <script type="text/javascript" language="javascript">
-
-        $(document).ready(function () {
-             setTimeout(function () {
-                  var imgs = document.getElementsByClassName("lazy-load");
-                  for (var i = 0; i < imgs.length; i++) {
-                       imgs[i].src = imgs[i].getAttribute("data-src");
-                  }
-             }, 1000);
-        });
-
-   </script>
-
 </head>
 
 {% capture layout %}{% if page.layout %}layout-{{ page.layout }}{% endif %}{% endcapture %}
@@ -47,15 +34,15 @@
     <!-- <div id="loader"></div> -->
     <!-- PRE LOADER -->
 
-    <div class="loader">
+    <!-- <div class="loader">
         <div class="spinner">
              <div class="dot1"></div>
              <div class="dot2"></div>
         </div>
-    </div>
-    <!-- <div class="loader">  
-        <img src="/assets/images/Earth-loader.gif" alt="">  
-    </div>  -->
+    </div> -->
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <div id="preloader"></div>
     <div id="page" class="site">
 
         {% if page.url == "/" %}

_sass/_general.scss

@@ -844,61 +844,70 @@ pre[class*="language-"] {
 /*---------------------------------------
     Preloader section              
 -----------------------------------------*/
-
-.loader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 99999;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
-    align-items: center;
-    background: none repeat scroll 0 0 #ffffff;
-  }
+    #preloader {
+        position: fixed;
+        left: 0;
+        top: 0;
+        z-index: 99999;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+        background: rgb(255, 255, 255) url('/assets/images/Earth-loader.gif') no-repeat center center;
+    }
+// .loader {
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     z-index: 99999;
+//     display: flex;
+//     flex-flow: row nowrap;
+//     justify-content: center;
+//     align-items: center;
+//     background: none repeat scroll 0 0 #ffffff;
+//   }
 
-  .spinner {
-    margin: 100px auto;
-    width: 40px;
-    height: 40px;
-    position: relative;
-    text-align: center;
-  }
+//   .spinner {
+//     margin: 100px auto;
+//     width: 40px;
+//     height: 40px;
+//     position: relative;
+//     text-align: center;
+//   }
 
-  .dot1 {
-    width: 100%;
-    height: 100%;
-    margin-left: -20px;
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    background-color: rgb(201, 57, 102);
-    border-radius: 100%;
-    z-index: 1;
-  }
+//   .dot1 {
+//     width: 100%;
+//     height: 100%;
+//     margin-left: -20px;
+//     display: inline-block;
+//     position: absolute;
+//     top: 0;
+//     background-color: rgb(201, 57, 102);
+//     border-radius: 100%;
+//     z-index: 1;
+//   }
 
-  .dot2 {
-    display: inline-block;
-    position: absolute;
-    background-color: rgb(221, 124, 191);
-    border-radius: 100%;
-    width: 40%;
-    height: 40%;
-    margin-left: -20px;
-    top: 30px;
-    left: 0px;
-    z-index: 2;
-    -webkit-animation: sk-orbit 0.75s infinite linear;
-    animation: sk-orbit 0.75s infinite linear;
-  }
+//   .dot2 {
+//     display: inline-block;
+//     position: absolute;
+//     background-color: rgb(221, 124, 191);
+//     border-radius: 100%;
+//     width: 40%;
+//     height: 40%;
+//     margin-left: -20px;
+//     top: 30px;
+//     left: 0px;
+//     z-index: 2;
+//     -webkit-animation: sk-orbit 0.75s infinite linear;
+//     animation: sk-orbit 0.75s infinite linear;
+//   }
 
-  @keyframes sk-orbit {
-    0% { z-index: 2; transform: translate(0%, 0%); }
-    49% { z-index: 2; transform: translate(400%, -200%); }
-    50% { z-index: 0; transform: translate(400%, -200%); }
-    99% { z-index: 0; transform: translate(0%, 0%); }
-    100% { z-index: 2; transform: translate(0%, 0%); }
-  }
+//   @keyframes sk-orbit {
+//     0% { z-index: 2; transform: translate(0%, 0%); }
+//     49% { z-index: 2; transform: translate(400%, -200%); }
+//     50% { z-index: 0; transform: translate(400%, -200%); }
+//     99% { z-index: 0; transform: translate(0%, 0%); }
+//     100% { z-index: 2; transform: translate(0%, 0%); }
+//   }
 

assets/js/loader.js

@@ -2,10 +2,17 @@
   PRE LOADER
 -------------------------------------------------------------------------------*/
 
-$(window).load(function() {
-  $('.loader').fadeOut(1000);  // set duration in brackets
-});
+// $(window).load(function() {
+//   $('.loader').fadeOut(1000);  // set duration in brackets
+// });
 
-$(document).ready(function() {
-  $('[data-toggle="tooltip"]').tooltip({boundary: 'window'});
+// $(document).ready(function() {
+//   $('[data-toggle="tooltip"]').tooltip({boundary: 'window'});
+// });
+$(function() {
+  $(window).on("load", function() {
+    $('#preloader').fadeOut('slow', function() {
+      $(this).remove();
+    });
+  });
 });