diff options
author | Dixsie Wolmers <dixsiew@gmail.com> | 2019-11-17 18:21:50 -0600 |
---|---|---|
committer | Dixsie Wolmers <dixsiew@gmail.com> | 2019-11-27 08:54:23 -0600 |
commit | d4a5d6f43c6e19bd89b4debfaf8019a118728911 (patch) | |
tree | 832598369d2f63c7ef2380e90288b68005c279cd | |
parent | 27915d2f48df3cd885f4606e90012bea8496be0c (diff) | |
download | phosphor-webui-d4a5d6f43c6e19bd89b4debfaf8019a118728911.tar.gz phosphor-webui-d4a5d6f43c6e19bd89b4debfaf8019a118728911.zip |
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
-rw-r--r-- | app/assets/icons/icon-loader.svg | 3 | ||||
-rw-r--r-- | app/common/components/status-icon.js | 8 | ||||
-rw-r--r-- | app/common/directives/loader.html | 8 | ||||
-rw-r--r-- | app/common/styles/elements/loader.scss | 33 |
4 files changed, 31 insertions, 21 deletions
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 @@ 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 |