diff --git a/app/coffee/modules/nav.coffee b/app/coffee/modules/nav.coffee
index bea0cbbc..c8393845 100644
--- a/app/coffee/modules/nav.coffee
+++ b/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', () ->
diff --git a/app/partials/views/components/spinner.jade b/app/partials/views/components/spinner.jade
new file mode 100644
index 00000000..5b60581b
--- /dev/null
+++ b/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
diff --git a/app/partials/views/modules/projects-nav.jade b/app/partials/views/modules/projects-nav.jade
index 470214da..ee6acc95 100644
--- a/app/partials/views/modules/projects-nav.jade
+++ b/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
diff --git a/app/styles/components/spinner.scss b/app/styles/components/spinner.scss
new file mode 100644
index 00000000..bced85a4
--- /dev/null
+++ b/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);
+    }
+}
diff --git a/app/styles/dependencies/animation.scss b/app/styles/dependencies/animation.scss
index fd7da7b1..608aa473 100644
--- a/app/styles/dependencies/animation.scss
+++ b/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;
+    }
+}
diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss
index 1bcd39ac..1b27fdc5 100644
--- a/app/styles/layout/base.scss
+++ b/app/styles/layout/base.scss
@@ -52,6 +52,7 @@ body {
         }
     }
     &.loading-project {
+        overflow: hidden;
         .projects-nav-overlay {
             @include transition (opacity 1s ease);
             opacity: 1;
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 42fbf00b..c08c2850 100755
--- a/app/styles/main.scss
+++ b/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
diff --git a/app/styles/modules/common/projects-nav.scss b/app/styles/modules/common/projects-nav.scss
index 4468a4cf..42d09e93 100644
--- a/app/styles/modules/common/projects-nav.scss
+++ b/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;
-    }
 }