Fixed animation on click on button for loading effect

app/coffee/modules/common/lightboxes.coffee

@@ -209,25 +209,24 @@ CreateEditUserstoryDirective = ($repo, $model, $rs, $rootScope, lightboxService)
                 return
 
             if isNew
-                target.html(loading) # Add item
+                target.addClass('loading').html(loading) # Add item
 
                 promise = $repo.create("userstories", $scope.us)
                 broadcastEvent = "usform:new:success"
 
             else
-                target.html(loading) # Add item
+                target.addClass('loading').html(loading) # Add item
-
                 promise = $repo.save($scope.us)
                 broadcastEvent = "usform:edit:success"
 
             promise.then (data) ->
-                target.html(finish) # Add item
+                target.removeClass('loading').html(finish) # Add item
 
                 lightboxService.close($el)
                 $rootScope.$broadcast(broadcastEvent, data)
 
             promise.then null, (data) ->
-                target.html(loading) # Add item
+                target.removeClass('loading').html(finish) # Add item
 
                 form.setErrors(data)
                 if data._error_message

app/fonts/taiga.svg

@@ -37,9 +37,9 @@
 <glyph unicode="&#66;" 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="&#67;" 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="&#68;" 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="&#69;" 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"/>
 <glyph unicode="&#70;" d="M402 165c0-5-2-10-5-13-4-4-8-6-13-6l-256 0c-5 0-9 2-13 6-3 3-5 8-5 13 0 5 2 9 5 12l128 128c4 4 8 6 13 6 5 0 9-2 13-6l128-128c3-3 5-7 5-12z"/>
 <glyph unicode="&#71;" d="M402 311c0-5-2-9-5-13l-128-128c-4-4-8-5-13-5-5 0-9 1-13 5l-128 128c-3 4-5 8-5 13 0 5 2 9 5 13 4 3 8 5 13 5l256 0c5 0 9-2 13-5 3-4 5-8 5-13z"/>
 <glyph unicode="&#72;" d="M128 384l64 0 0-64-64 0z m0-96l64 0 0-64-64 0z m0-96l64 0 0-64-64 0z m128 0l128 0 0-64-128 0z m224 320l-448 0c-18 0-32-14-32-32l0-448c0-18 14-32 32-32l448 0c18 0 32 14 32 32l0 448c0 18-14 32-32 32z m-32-448l-384 0 0 384 384 0z m-192 224l128 0 0-64-128 0z m0 96l128 0 0-64-128 0z"/>
 <glyph unicode="&#73;" d="M184 20c0 0 0 54 0 54 0 0 144 0 144 0 0 0 0-54 0-54-24-14-48-21-73-20-23-1-47 6-71 20m141 84c0 0-138 0-138 0 0 25-6 49-19 72-12 23-25 43-40 58-14 15-26 34-37 57-11 23-16 47-14 71 3 41 19 77 48 106 30 29 73 44 130 44 58 0 102-15 131-44 29-29 45-65 49-106 1-20-2-39-9-57-6-18-15-35-26-50-11-14-22-29-33-43-12-14-21-31-30-49-8-19-12-38-12-59m-193 254c-2-1-2-4 0-10 1-5 1-9 1-10-1-1 0-5 2-10 3-5 4-8 3-9 0-1 1-4 4-9 3-5 5-9 6-10 1-1 3-5 7-10 3-5 6-8 7-9 1-2 3-5 7-11 5-6 7-10 9-12 30-42 49-78 57-108 0 0 42 0 42 0 8 32 27 68 57 108 2 2 6 8 13 18 7 10 12 16 13 18 1 3 4 8 9 15 4 8 7 13 8 17 1 4 2 9 3 14 1 6 1 12 0 18-5 67-47 101-125 101-77 0-118-34-123-101"/>
+<glyph unicode="&#69;" d="M480 224l-64 0c-18 0-32 14-32 32 0 18 14 32 32 32l64 0c18 0 32-14 32-32 0-18-14-32-32-32z m-88 122c-13-12-33-12-45 0-13 13-13 33 0 46l45 45c12 12 33 12 45 0 13-13 13-33 0-45z m-136-346c-18 0-32 14-32 32l0 64c0 18 14 32 32 32 18 0 32-14 32-32l0-64c0-18-14-32-32-32z m0 384c-18 0-32 14-32 32l0 64c0 18 14 32 32 32 18 0 32-14 32-32l0-64c0-18-14-32-32-32z m-136-309c-12-13-32-13-45 0-12 12-12 33 0 45l45 45c13 13 33 13 46 0 12-12 12-32 0-45z m0 271l-45 46c-12 12-12 32 0 45 13 12 33 12 45 0l46-45c12-13 12-33 0-46-13-12-33-12-46 0z m8-90c0-18-14-32-32-32l-64 0c-18 0-32 14-32 32 0 18 14 32 32 32l64 0c18 0 32-14 32-32z m264-91l45-45c13-12 13-33 0-45-12-13-33-13-45 0l-45 45c-13 13-13 33 0 45 12 13 32 13 45 0z"/>
 </font></defs></svg>

app/styles/components/buttons.scss

@@ -24,6 +24,12 @@
     &:hover {
         @include transition (background .3s linear);
     }
+    &.loading {
+        span {
+            @include animation (loading .5s linear);
+            @include animation (spin 1s linear infinite);
+        }
+    }
     .icon {
         margin-right: .3rem;
     }

app/styles/dependencies/animation.scss

@@ -5,10 +5,6 @@
     }
 }
 
-.icon-spinner {
-    @include animation(spin .5s linear);
-}
-
 //Spinner
 @include keyframes(fadeIn) {
     0% {
@@ -37,3 +33,15 @@
         opacity: 0;
     }
 }
+
+//Loading
+@include keyframes(loading) {
+    0% {
+        @include filter(blur(5px));
+        opacity: 0;
+    }
+    100% {
+        @include filter(blur(0));
+        opacity: 1;
+    }
+}

app/styles/dependencies/typography.scss

@@ -232,9 +232,6 @@ a:visited {
 .icon-attachments:before {
     content: 'D';
 }
-.icon-spinner:before {
-    content: 'E';
-}
 .icon-caret-up:before {
     content: 'F';
 }
@@ -247,3 +244,6 @@ a:visited {
 .icon-idea:before {
     content: 'I';
 }
+.icon-spinner:before {
+    content: 'E';
+}