Redesign loading icon and improve loading time (visually)

Minor style fixes in menu secundary

Redesign loading icon and improve loading time

Improved contrast and saturation in loading colors

Loader clean up

fix loader blink

app/coffee/modules/common/loader.coffee

@@ -57,7 +57,7 @@ Loader = () ->
 
     defaultConfig = {
         enabled: false,
-        minTime: 1000
+        minTime: 300
     }
 
     config = _.merge({}, defaultConfig)

app/partials/views/components/loading-bar.jade

@@ -0,0 +1,6 @@
+div.loading
+    span.item.item-1
+    span.item.item-2
+    span.item.item-3
+    span.item.item-4
+    span.item.item-5

app/partials/views/components/spinner.jade

@@ -1,2 +0,0 @@
-object.logo-svg(type="image/svg+xml", data="/svg/spinner.svg")
-    img(src="/svg/logo.svg", alt="TAIGA")

app/partials/views/modules/loader.jade

@@ -1,4 +1,4 @@
 .loader(tg-loader)
+    include ../components/loading-bar
     div.container
-        include ../components/spinner
         p Loading...

app/partials/views/modules/projects-nav.jade

@@ -1,6 +1,5 @@
 .projects-nav-overlay
     div.container
-        include ../components/spinner
         p Loading project...
 
 div.wizard-create-project(tg-lb-create-project)

app/styles/components/loader.scss

@@ -1,8 +1,6 @@
 .loader {
-    @include transition(opacity .5s linear);
     background-color: $white;
     bottom: 0;
-    display: none;
     height: 100%;
     left: 0;
     opacity: 0;
@@ -10,23 +8,22 @@
     right: 0;
     top: 0;
     width: 100%;
-    z-index: 99900;
+    z-index: -100;
     .container {
-        margin: 0 auto;
+        @include display(flex);
-        margin-top: 15%;
+        @include align-items(center);
-        position: relative;
+        @include justify-content(center);
-        width: 150px;
+        height: 100%;
+        width: 100%;
     }
     p {
         @extend %large;
-        color: $gray-light;
+        color: $gray;
-        padding-top: 20px;
         text-align: center;
     }
     &.active {
-        @include transition(opacity .5s linear);
+        background-color: rgba($white, .95);
-        background-color: rgba($white, .9);
-        display: block;
         opacity: 1;
+        z-index: 99900;
     }
 }

app/styles/components/loading-bar.scss

@@ -0,0 +1,24 @@
+.loading {
+    @include display(flex);
+    @include align-items(stretch);
+    @include flex-direction(row);
+    @include justify-content(flex-start);
+    .item {
+        @include animation-duration(5s);
+        @include animation-iteration-count(infinite);
+        @include animation-name(loadBar);
+        @include animation-timing-function(ease-in);
+        @include flex(1);
+        background: $gray;
+        height: 5px;
+    }
+
+    $colors-list: #bbe831 #237400 #e43050 #810061 #618000;
+    @each $current-color in $colors-list {
+        $i: index($colors-list, $current-color) - 1;
+        .item-#{$i} {
+            @include animation-delay(#{$i}s);
+            background: $current-color;
+        }
+    }
+}

app/styles/layout/animation.scss

@@ -1,39 +1,3 @@
-// Rotating loader
-@include keyframes(spin) {
-    100% {
-        @include transform(rotate(360deg));
-    }
-}
-
-//Spinner
-@include keyframes(fadeIn) {
-    0% {
-        @include transform(translateX(1rem));
-        @include filter(blur(5px));
-        opacity: 0;
-    }
-    1.6% {
-        @include transform(translateX(.2rem));
-        @include filter(blur(0));
-        opacity: 1;
-    }
-    12% {
-        @include transform(translateX(-.2rem));
-        @include filter(blur(0));
-        opacity: 1;
-    }
-    16% {
-        @include transform(translateX(-1rem));
-        @include filter(blur(5px));
-        opacity: 0;
-    }
-    100% {
-        @include transform(translateX(-1rem));
-        @include filter(blur(5px));
-        opacity: 0;
-    }
-}
-
 //Loading
 @include keyframes(loading) {
     0% {
@@ -60,3 +24,16 @@
         opacity: 1;
     }
 }
+
+//Bar loading
+@include keyframes(loadBar) {
+    0% {
+        @include flex(1);
+    }
+    10% {
+        @include flex(10);
+    }
+    20% {
+        @include flex(1);
+    }
+}

app/styles/layout/base.scss

@@ -80,6 +80,7 @@ body {
 }
 
 .master {
+    background: $white;
     height: 100%;
     min-height: 100%;
     position: relative;
@@ -106,7 +107,7 @@ body {
             @include flex(1);
             @include transition(all .2s linear);
             padding: 2em 1em;
-            width: 260px;
+            width: 210px;
             .filters-inner {
                 @include transition (all .4s ease-in);
                 opacity: 1;

app/styles/layout/issues.scss

@@ -1,6 +1,7 @@
 .issues {
     .filters-bar {
-        @include table-flex-child(1, 260px, 0, 260px);
+        @include flex(1);
+        width: 210px;
     }
     .filters-inner {
         opacity: 1;

main-sass.js

@@ -51,7 +51,7 @@ exports.files = function () {
         'components/wysiwyg',
         'components/select-color',
         'components/loader',
-        'components/spinner',
+        'components/loading-bar',
         'components/help-notion-button',
         'components/beta',
         'components/markitup',