Update loading spinner

Loader was updated with loading icon svg. Added inline style
for loading icon and added loader svg to status-icon directive.
Status icons will be used in file-upload component for firmware page update.

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I15e6f9fa39a08fcc8cfe354f8ed4447aab6425a9

3 files changed, 28 insertions, 21 deletions

diff --git a/app/common/components/status-icon.js b/app/common/components/status-icon.js
index d756326..f7929c2 100644
--- a/app/common/components/status-icon.js
+++ b/app/common/components/status-icon.js
@@ -32,7 +32,13 @@ window.angular && (function(angular) {
                           file="icon-critical.svg"
                           aria-hidden="true"
                           class="status-icon">
-                    </icon>`
+                    </icon>
+                    <icon ng-if="$ctrl.status === 'loading'"
+                          file="icon-loader.svg"
+                          aria-hidden="true"
+                          class="icon__loader icon__loader-sm">
+                    </icon>
+                    `
 
   /**
    * Register statusIcon component
diff --git a/app/common/directives/loader.html b/app/common/directives/loader.html
index d3026dc..537122a 100644
--- a/app/common/directives/loader.html
+++ b/app/common/directives/loader.html
@@ -1,4 +1,4 @@
-<div class="loader__wrapper" ng-show="loading"><svg class="loader" viewBox="25 25 50 50">
-  <circle class="loader__path" cx="50" cy="50" r="20"/></circle>
-</svg></div>
-<div class="loader__overlay" ng-show="loading"></div>
\ No newline at end of file
+<div class="loader__wrapper" ng-show="loading">
+  <icon class="icon__loader" aria-hidden="true" file="icon-loader.svg"></icon>
+</div>
+<div class="loader__overlay" ng-show="loading"></div>
diff --git a/app/common/styles/elements/loader.scss b/app/common/styles/elements/loader.scss
index bfd0272..9f2031e 100644
--- a/app/common/styles/elements/loader.scss
+++ b/app/common/styles/elements/loader.scss
@@ -1,4 +1,4 @@
-// Loader
+// Loader Spinner
 
 @keyframes rotate {
   0% {  transform: rotate(0deg);}
@@ -16,28 +16,29 @@
   z-index: 91;
 }
 
-.loader{
+.icon__loader {
   width:100%;
   height:100%;
   transform: translateZ(0) rotate(360deg);
   transform-origin: center center;
   -moz-transform-origin: center center; /* firefox requires fixed values */
   animation: rotate 1s linear infinite;
+  svg circle {
+    stroke-dasharray: 80px;
+    stroke-dashoffset: 9.7px;
+    fill: transparent;
+    stroke: $base-01--02;
+    stroke-width: 5px;
+    stroke-linecap: round;
+  }
 }
 
-.loader__path{
-  stroke-dasharray: 80px;
-  stroke-dashoffset: 9.7px;
-  r: 16px;
-  cx: 50px;
-  cy: 50px;
-  fill: transparent;
-  stroke: $base-01--02;
-  stroke-width: 5px;
-  stroke-linecap: round;
-  transition: stroke-dashoffset 1s cubic-bezier(.5,.08,0,1);
-  -webkit-animation: a 4s ease-out infinite;
-  animation: a 4s ease-out infinite;
+.icon__loader-sm {
+  width: 1.4rem;
+  height: 1.4rem;
+  vertical-align: text-bottom;
+  border-width: .2em;
+  line-height:0;
 }
 
 .loader__overlay {
@@ -49,4 +50,4 @@
   height: 100%;
   z-index: 90;
   width: 100%;
-}
+}
\ No newline at end of file