implement spinner in pure css

src/sass/views/_mail-list.scss

@@ -56,6 +56,34 @@
             font-size: $font-size-smaller;
             color: $color-grey-dark;
             line-height: em(28,12);
+
+            &.syncing {
+                .spinner {
+                    top: 6.5px;
+                    left: $padding-horizontal;
+                    height: 13px;
+                    width: 13px;
+                    position: absolute;
+                    animation: rotation .6s linear infinite;
+                    border-left: 2px solid $color-grey-light;
+                    border-right: 2px solid $color-grey-light;
+                    border-bottom: 2px solid $color-grey-light;
+                    border-top: 2px solid $color-grey;
+                    border-radius: 100%;
+                }
+                .text {
+                    padding-left: 1.5em;
+                }
+            }
         }
     }
+}
+
+@keyframes rotation {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(359deg);
+    }
 }

src/tpl/mail-list.html

@@ -17,7 +17,8 @@
     </ul><!--/.mail-list-->
   </div>
 
-  <footer ng-click="synchronize()">
+  <footer ng-class="{syncing: lastUpdateLbl === 'Syncing ...'}" ng-click="synchronize()">
-    {{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}
+    <span class="spinner"></span>
+    <span class="text">{{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}</span>
   </footer>
 </div><!--/.view-mail-list-->