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
diff --git a/app/assets/icons/icon-loader.svg b/app/assets/icons/icon-loader.svg
new file mode 100644
index 0000000..f2b014a
--- /dev/null
+++ b/app/assets/icons/icon-loader.svg
@@ -0,0 +1,3 @@
+<svg viewBox="25 25 50 50">
+ <circle cx="50" cy="50" r="16"></circle>
+</svg>
\ No newline at end of file
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 @@
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
