power-operations: add indeterminate status bar
Change-Id: I400aa855e4e9dd6b00f665083a7ba0fa4843825d
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/scss/base/_mixins.scss b/src/scss/base/_mixins.scss
index 578a866..71d8f39 100644
--- a/src/scss/base/_mixins.scss
+++ b/src/scss/base/_mixins.scss
@@ -51,3 +51,47 @@
@mixin bgImage__arrowDown-grey {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #b8c1c1'></polygon></svg>");
}
+
+@mixin indeterminate-bar {
+ background-image: repeating-linear-gradient(-45deg, rgba(251, 234, 174, 0.35), rgba(251, 234, 174, 0.35) 25px, rgba(244, 176, 0, 0.45) 25px, rgba(244, 176, 0, 0.45) 50px);
+ -webkit-animation: progress 2s linear infinite;
+ -moz-animation: progress 2s linear infinite;
+ animation: progress 2s linear infinite;
+ background-size: 130% 100%;
+
+ @-webkit-keyframes progress {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -70px 0;
+ }
+ }
+
+ @-moz-keyframes progress {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -70px 0;
+ }
+ }
+
+ @-ms-keyframes progress {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -70px 0;
+ }
+ }
+
+ @keyframes progress {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -70px 0;
+ }
+ }
+}