Generic spinner

app/coffee/modules/nav.coffee

@@ -64,8 +64,8 @@ ProjectsNavigationDirective = ($rootscope, animationFrame) ->
             difftime = new Date().getTime() - loadingStart
             timeout = 0
 
-            if (difftime < 500)
-                timeout = 500 - timeout
+            if (difftime < 3500)
+                timeout = 3500 - timeout
 
             setTimeout ( ->
                 overlay.one 'transitionend', () ->

app/partials/views/components/spinner.jade

@@ -0,0 +1,7 @@
+.spinner
+    span.icon.icon-backlog
+    span.icon.icon-kanban
+    span.icon.icon-iocaine
+    span.icon.icon-floppy
+    span.icon.icon-settings
+    span.icon.icon-wiki

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

@@ -1,8 +1,7 @@
 .projects-nav-overlay
-    div
-        img(src="/images/logo.png", alt="TAIGA")
-        p Loading project
-        span.icon.icon-spinner
+    div.container
+        include ../components/spinner
+        p Loading project...
 
 div.lightbox.lightbox_create-project.hidden(tg-lb-create-project)
     include lightbox_create-project

app/styles/components/spinner.scss

@@ -0,0 +1,40 @@
+.spinner {
+    background: rgba($green-taiga, .9);
+    border-radius: 4%;
+    box-shadow: 1px 1px 10px rgba($fresh-taiga, .9);
+    height: 8rem;
+    margin: 0 auto;
+    padding: 1.5rem;
+    position: relative;
+    width: 7rem;
+    .icon {
+        @include animation(fadeIn infinite 6s ease-in-out);
+        @extend %xxlarge;
+        border-radius: 5%;
+        color: darken($green-taiga, 20%);
+        font-size: 75px;
+        height: 80%;
+        left: 15%;
+        margin: auto;
+        opacity: 0;
+        position: absolute;
+        top: 20%;
+        width: 80%;
+    }
+
+    .icon-kanban {
+        @include animation-delay(1s);
+    }
+    .icon-settings {
+        @include animation-delay(2s);
+    }
+    .icon-iocaine {
+        @include animation-delay(3s);
+    }
+    .icon-floppy {
+        @include animation-delay(4s);
+    }
+    .icon-wiki {
+        @include animation-delay(5s);
+    }
+}

app/styles/dependencies/animation.scss

@@ -1,5 +1,30 @@
+// Rotating loader
 @include keyframes(spin) {
     100% {
         @include transform(rotate(360deg));
     }
 }
+
+//Spinner
+@include keyframes(fadeIn) {
+    0% {
+        @include transform(translateX(1rem));
+        opacity: 0;
+    }
+    1.6% {
+        opacity: 1;
+        @include transform(translateX(.2rem));
+    }
+    12% {
+        opacity: 1;
+        @include transform(translateX(-.2rem));
+    }
+    16% {
+        @include transform(translateX(-1rem));
+        opacity: 0;
+    }
+    100% {
+        @include transform(translateX(-1rem));
+        opacity: 0;
+    }
+}

app/styles/layout/base.scss

@@ -52,6 +52,7 @@ body {
         }
     }
     &.loading-project {
+        overflow: hidden;
         .projects-nav-overlay {
             @include transition (opacity 1s ease);
             opacity: 1;

app/styles/main.scss

@@ -42,6 +42,7 @@ $prefix-for-spec:      true;
 @import 'components/wysiwyg';
 @import 'components/select-color';
 @import 'components/loader';
+@import 'components/spinner';
 
 //#################################################
 //             Modules

app/styles/modules/common/projects-nav.scss

@@ -98,21 +98,18 @@
     top: 0;
     width: 100%;
     z-index: 99900;
-    div {
-        //@include transform(translateY(-50%));
-        margin: 20% auto;
+    .container {
+        @include transform(translateY(-50%));
+        left: -200px;
+        margin: 0 auto;
+        margin-top: 15%;
         opacity: 0;
-        text-align: center;
-        width: 500px;
+        position: relative;
+        width: 150px;
     }
     p {
         @extend %large;
-        color: $whitish;
+        color: $fresh-taiga;
         padding-top: 20px;
     }
-    .icon {
-        @extend %xxlarge;
-        @include animation(spin 1s linear infinite);
-        color: $whitish;
-    }
 }