-Pre loader ready

Alexey Boroda
1 parent 198ca6c0
Showing 3 changed files with 62 additions and 0 deletions Show diff stats
backend/views/site/index.php
backend/web/css/custom.css
backend/web/js/analytics.js
@@ -13,6 +13,7 @@
     AnalyticsAsset::register($this);
 ?>
+<div class="animated yt-loader"></div>
 <div class="row">
   <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
@@ -4182,7 +4182,66 @@ ul.notifications {
    .dataTables_length { float:none; }
 }
+.animated {
+    -webkit-animation-duration: 5s;
+    animation-duration: 5s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+}
+
+.yt-loader {
+    -webkit-animation-name: horizontalProgressBar;
+    animation-name: horizontalProgressBar;
+    -webkit-animation-timing-function: ease;
+    animation-timing-function: ease;
+    background: #1abb9c;
+    height: 3px;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 0%;
+    z-index: 9999;
+}
+
+@keyframes horizontalProgressBar {
+    0% {
+        width: 0%;
+    }
+    25% {
+        width: 22%;
+    }
+    50% {
+        width: 55%;
+    }
+    75% {
+        width: 83%;
+    }
+    100% {
+        width: 100%;
+    }
+}
+@-webkit-keyframes horizontalProgressBar /* Safari and Chrome */
+{
+    0% {
+        width: 0%;
+    }
+    25% {
+        width: 22%;
+    }
+    50% {
+        width: 55%;
+    }
+    75% {
+        width: 83%;
+    }
+    100% {
+        width: 100%;
+    }
+}
 /* CSS3 Checkbox */
@@ -94,6 +94,8 @@ $(
                         .replaceWith(data.cityes);
                     $('#countries')
                         .replaceWith(data.countries);
+                    $('.yt-loader')
+                        .remove();
                 }
             }
         )