diff --git a/web-frontend/public/index.html b/web-frontend/public/index.html
index b56bc16eb..b848a2311 100755
--- a/web-frontend/public/index.html
+++ b/web-frontend/public/index.html
@@ -149,6 +149,10 @@
                 </a>
                 <a href="#" class="button button-large button-ghost">Go back</a>
             </div>
+            <div style="margin-bottom: 20px">
+                <a href="#" class="button button-large button-loading">Loading</a>
+                <a href="#" class="button button-loading">Loading</a>
+            </div>
         </div>
     </body>
 </html>
diff --git a/web-frontend/src/scss/base/_helpers.scss b/web-frontend/src/scss/base/_helpers.scss
index ee7531a43..2143c8731 100644
--- a/web-frontend/src/scss/base/_helpers.scss
+++ b/web-frontend/src/scss/base/_helpers.scss
@@ -23,14 +23,14 @@
 
 @keyframes spin {
   0% {
-    transform: rotate(0deg);
+    transform:rotate(0);
   }
 
-  40% {
-    transform: rotate(360deg);
+  50% {
+    transform:rotate(360deg);
   }
 
   100% {
-    transform: rotate(720deg);
+    transform:rotate(720deg);
   }
 }
diff --git a/web-frontend/src/scss/components/_button.scss b/web-frontend/src/scss/components/_button.scss
index 3c9fd8911..0a08a2b82 100644
--- a/web-frontend/src/scss/components/_button.scss
+++ b/web-frontend/src/scss/components/_button.scss
@@ -78,8 +78,9 @@
     width: 1.4em;
     height: 1.4em;
     border-radius: 50%;
-    border: 0.25em solid #fff;
+    border: 0.25em solid;
     border-color: #fff transparent #fff transparent;
-    animation: spin 1.8s linear infinite;
+    animation: spin infinite 1800ms;
+    animation-timing-function: cubic-bezier(.785, .135, .15, .86);
   }
 }