Spinner on load projects and animations

app/fonts/taiga.svg

@@ -38,4 +38,5 @@
 <glyph unicode="&#67;" d="M453 425c-1 9-8 16-17 16l-360 0 0 0c-9 0-16-7-17-16l0 0 0-288 0 0c2-8 9-14 17-14l0 0 59 0 0-35c0-9 8-17 17-17 6 0 11 3 14 8l45 44 225 0c8 0 15 6 17 14l0 0 0 288z"/>
 <glyph unicode="&#68;" d="M411 448l0 0 0 21c0 4-4 8-9 8l-168 0-133-132 0-302c0-4 4-8 9-8l292 0c5 0 9 4 9 8l0 13 0 0z m-259-362l0 241 91 0c5 0 9 4 9 9l0 90 108 0 0-340z"/>
 <glyph unicode="&#69;" d="M155 59c-14 0-32 5-50 23-24 24-27 47-25 62 2 17 11 34 27 50l150 151c43 42 71 26 83 13 16-15 26-42-14-82l-138-139-27 27 138 139c22 21 17 26 14 28-1 2-7 8-29-13l-150-151c-7-7-15-17-16-28-1-9 4-19 14-30 13-13 23-12 26-11 9 1 19 7 30 18 13 12 167 166 178 178 15 15 24 29 28 42 5 20-1 38-20 57-19 19-51 40-98-8l-165-165c-8-7-20-7-27 0-8 8-8 20 0 27l165 165c51 51 106 54 152 8 36-36 36-71 30-94-6-20-18-39-38-59-11-12-166-166-178-178-17-17-34-26-51-29-3 0-6-1-9-1z"/>
+<glyph unicode="&#70;" d="M174 128c0-11-4-21-12-29-9-8-18-12-29-12-12 0-22 4-30 12-8 8-12 18-12 29 0 11 4 21 12 29 8 8 18 12 30 12 11 0 20-4 29-12 8-8 12-18 12-29z m123-55c0-10-3-19-11-26-7-7-15-10-25-10-11 0-19 3-26 10-7 7-11 16-11 26 0 10 4 19 11 26 7 7 15 11 26 11 10 0 18-4 25-11 8-7 11-16 11-26z m-174 183c0-13-4-23-13-32-9-9-20-14-32-14-13 0-24 5-33 14-9 9-13 19-13 32 0 13 4 23 13 32 9 9 20 14 33 14 12 0 23-5 32-14 9-9 13-19 13-32z m298-128c0-9-4-16-10-23-6-6-14-9-22-9-9 0-17 3-23 9-6 7-9 14-9 23 0 9 3 16 9 23 6 6 14 9 23 9 8 0 16-3 22-9 6-7 10-14 10-23z m-238 256c0-14-5-26-15-36-10-9-22-14-35-14-14 0-26 5-36 14-10 10-15 22-15 36 0 14 5 26 15 36 10 9 22 14 36 14 13 0 25-5 35-14 10-10 15-22 15-36z m132 55c0-15-5-28-16-39-10-11-23-16-38-16-16 0-29 5-39 16-11 11-16 24-16 39 0 15 5 28 16 39 10 10 23 16 39 16 15 0 28-6 38-16 11-11 16-24 16-39z m156-183c0-8-3-14-8-19-5-6-12-8-20-8-7 0-14 2-19 8-5 5-8 11-8 19 0 8 3 14 8 19 5 6 12 8 19 8 8 0 15-2 20-8 5-5 8-11 8-19z m-60 128c0-6-2-12-6-16-5-5-10-7-16-7-7 0-12 2-17 7-4 4-6 10-6 16 0 6 2 12 6 16 5 5 10 7 17 7 6 0 11-2 16-7 4-4 6-10 6-16z"/>
 </font></defs></svg>

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

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

app/styles/dependencies/animation.scss

@@ -0,0 +1,5 @@
+@include keyframes(spin) {
+    100% {
+        @include transform(rotate(360deg));
+    }
+}

app/styles/dependencies/typography.scss

@@ -218,3 +218,6 @@ a:visited {
 .icon-attachments:before {
     content: 'E';
 }
+.icon-spinner:before {
+    content: 'F';
+}

app/styles/main.scss

@@ -19,6 +19,7 @@ $prefix-for-spec:      true;
 @import 'dependencies/mixins';
 @import 'dependencies/responsive';
 @import 'dependencies/forms';
+@import 'dependencies/animation';
 
 //#################################################
 //             components

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

@@ -98,7 +98,8 @@
     width: 100%;
     z-index: 99900;
     div {
-        margin: 10% auto;
+        //@include transform(translateY(-50%));
+        margin: 20% auto;
         opacity: 0;
         text-align: center;
         width: 500px;
@@ -108,4 +109,9 @@
         color: $whitish;
         padding-top: 20px;
     }
+    .icon {
+        @extend %xxlarge;
+        @include animation(spin 1s linear infinite);
+        color: $whitish;
+    }
 }