diff --git a/app/templating/Environment.scala b/app/templating/Environment.scala
index 1dec94f4ca..1e9fdc4420 100644
--- a/app/templating/Environment.scala
+++ b/app/templating/Environment.scala
@@ -51,6 +51,6 @@ object Environment
)
val spinner: Frag = raw(
- """"""
+ """"""
)
}
diff --git a/ui/common/css/component/_loader.scss b/ui/common/css/component/_loader.scss
index 2a69703be5..47180e7964 100644
--- a/ui/common/css/component/_loader.scss
+++ b/ui/common/css/component/_loader.scss
@@ -1,34 +1,49 @@
/* circular loader */
+$len1: 33.96;
+$len2: 42.6;
+$len3: 104.31;
+$total_len: $len1 + $len2 + $len3;
+
@keyframes mask1 {
0% {
- stroke-dashoffset: 1;
+ stroke-dashoffset: $total_len;
}
- 17.86% {
- stroke-dashoffset: 0;
+ 100% {
+ stroke-dashoffset: -$total_len;
}
}
@keyframes mask2 {
0% {
- stroke-dashoffset: 1;
+ stroke-dashoffset: $total_len + $len1;
}
- 17.86% {
- stroke-dashoffset: 1;
- }
- 31.43% {
- stroke-dashoffset: 0;
+ 100% {
+ stroke-dashoffset: -$total_len + $len1;
}
}
@keyframes mask3 {
0% {
- stroke-dashoffset: 1;
+ stroke-dashoffset: $total_len + $len1 + $len2;
}
- 31.43% {
- stroke-dashoffset: 1;
+ 100% {
+ stroke-dashoffset: -$total_len + $len1 + $len2;
}
- 85% {
- stroke-dashoffset: 0;
+}
+
+@keyframes spinner-color {
+ 0%,
+ 100% {
+ stroke: $c-primary;
+ }
+ 25% {
+ stroke: $c-error;
+ }
+ 50% {
+ stroke: $c-secondary;
+ }
+ 75% {
+ stroke: $c-brag;
}
}
@@ -37,14 +52,19 @@
height: 70px;
margin: auto;
- path:nth-child(1) {
- animation: mask1 2s cubic-bezier(0.417, 0.086, 0.741, 0.452) infinite;
+ path {
+ animation: mask1 2.75s cubic-bezier(.49,.67,.45,.29) infinite;
}
path:nth-child(2) {
- animation: mask2 2s cubic-bezier(0.333, 0.317, 0.621, 0.661) infinite;
+ animation-name: mask2;
}
path:nth-child(3) {
- animation: mask3 2s cubic-bezier(0, 0, 0.431, 1) infinite;
+ animation-name: mask3;
+ }
+
+ g {
+ animation: spinner-color 11s steps(1) infinite;
+ stroke-dasharray: $total_len;
}
.white & path {
diff --git a/ui/common/src/spinner.ts b/ui/common/src/spinner.ts
index 90c7b71eef..413b7802b6 100644
--- a/ui/common/src/spinner.ts
+++ b/ui/common/src/spinner.ts
@@ -29,18 +29,9 @@ export default function (): VNode {
attrs: {
mask: 'url(#mask)',
fill: 'none',
- stroke: '#888',
- 'stroke-dasharray': 1,
},
},
- pathAttrs.map(attrs => {
- return h('path', {
- attrs: {
- pathLength: 1, // cannot be inherited from parent group
- ...attrs,
- },
- });
- })
+ pathAttrs.map(attrs => h('path', { attrs }))
),
]),
]
diff --git a/ui/site/src/component/spinner.ts b/ui/site/src/component/spinner.ts
index 83da995a81..708f40f581 100644
--- a/ui/site/src/component/spinner.ts
+++ b/ui/site/src/component/spinner.ts
@@ -1,4 +1,4 @@
const spinner =
- '';
+ '';
export default spinner;