Colorize the logo spinner and add animation
parent
f79dd829ea
commit
26ccf278fa
|
@ -51,6 +51,6 @@ object Environment
|
||||||
)
|
)
|
||||||
|
|
||||||
val spinner: Frag = raw(
|
val spinner: Frag = raw(
|
||||||
"""<div class="spinner"><svg viewBox="-2 -2 54 54"><g mask="url(#mask)" fill="none" stroke="#888" stroke-dasharray="1"><path id="a" pathLength="1" stroke-width="3.779" d="m21.78 12.64c-1.284 8.436 8.943 12.7 14.54 17.61 3 2.632 4.412 4.442 5.684 7.93"/><path id="b" pathLength="1" stroke-width="4.157" d="m43.19 36.32c2.817-1.203 6.659-5.482 5.441-7.623-2.251-3.957-8.883-14.69-11.89-19.73-0.4217-0.7079-0.2431-1.835 0.5931-3.3 1.358-2.38 1.956-5.628 1.956-5.628"/><path id="c" pathLength="1" stroke-width="4.535" d="m37.45 2.178s-3.946 0.6463-6.237 2.234c-0.5998 0.4156-2.696 0.7984-3.896 0.6388-17.64-2.345-29.61 14.08-25.23 27.34 4.377 13.26 22.54 25.36 39.74 8.666"/></g></svg></div>"""
|
"""<div class="spinner"><svg viewBox="-2 -2 54 54"><g mask="url(#mask)" fill="none"><path id="a" stroke-width="3.779" d="m21.78 12.64c-1.284 8.436 8.943 12.7 14.54 17.61 3 2.632 4.412 4.442 5.684 7.93"/><path id="b" stroke-width="4.157" d="m43.19 36.32c2.817-1.203 6.659-5.482 5.441-7.623-2.251-3.957-8.883-14.69-11.89-19.73-0.4217-0.7079-0.2431-1.835 0.5931-3.3 1.358-2.38 1.956-5.628 1.956-5.628"/><path id="c" stroke-width="4.535" d="m37.45 2.178s-3.946 0.6463-6.237 2.234c-0.5998 0.4156-2.696 0.7984-3.896 0.6388-17.64-2.345-29.61 14.08-25.23 27.34 4.377 13.26 22.54 25.36 39.74 8.666"/></g></svg></div>"""
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,34 +1,49 @@
|
||||||
/* circular loader */
|
/* circular loader */
|
||||||
|
$len1: 33.96;
|
||||||
|
$len2: 42.6;
|
||||||
|
$len3: 104.31;
|
||||||
|
$total_len: $len1 + $len2 + $len3;
|
||||||
|
|
||||||
@keyframes mask1 {
|
@keyframes mask1 {
|
||||||
0% {
|
0% {
|
||||||
stroke-dashoffset: 1;
|
stroke-dashoffset: $total_len;
|
||||||
}
|
}
|
||||||
17.86% {
|
100% {
|
||||||
stroke-dashoffset: 0;
|
stroke-dashoffset: -$total_len;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes mask2 {
|
@keyframes mask2 {
|
||||||
0% {
|
0% {
|
||||||
stroke-dashoffset: 1;
|
stroke-dashoffset: $total_len + $len1;
|
||||||
}
|
}
|
||||||
17.86% {
|
100% {
|
||||||
stroke-dashoffset: 1;
|
stroke-dashoffset: -$total_len + $len1;
|
||||||
}
|
|
||||||
31.43% {
|
|
||||||
stroke-dashoffset: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes mask3 {
|
@keyframes mask3 {
|
||||||
0% {
|
0% {
|
||||||
stroke-dashoffset: 1;
|
stroke-dashoffset: $total_len + $len1 + $len2;
|
||||||
}
|
}
|
||||||
31.43% {
|
100% {
|
||||||
stroke-dashoffset: 1;
|
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;
|
height: 70px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
||||||
path:nth-child(1) {
|
path {
|
||||||
animation: mask1 2s cubic-bezier(0.417, 0.086, 0.741, 0.452) infinite;
|
animation: mask1 2.75s cubic-bezier(.49,.67,.45,.29) infinite;
|
||||||
}
|
}
|
||||||
path:nth-child(2) {
|
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) {
|
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 {
|
.white & path {
|
||||||
|
|
|
@ -29,18 +29,9 @@ export default function (): VNode {
|
||||||
attrs: {
|
attrs: {
|
||||||
mask: 'url(#mask)',
|
mask: 'url(#mask)',
|
||||||
fill: 'none',
|
fill: 'none',
|
||||||
stroke: '#888',
|
|
||||||
'stroke-dasharray': 1,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
pathAttrs.map(attrs => {
|
pathAttrs.map(attrs => h('path', { attrs }))
|
||||||
return h('path', {
|
|
||||||
attrs: {
|
|
||||||
pathLength: 1, // cannot be inherited from parent group
|
|
||||||
...attrs,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
})
|
|
||||||
),
|
),
|
||||||
]),
|
]),
|
||||||
]
|
]
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
const spinner =
|
const spinner =
|
||||||
'<div class="spinner"><svg viewBox="-2 -2 54 54"><g mask="url(#mask)" fill="none" stroke="#888" stroke-dasharray="1"><path id="a" pathLength="1" stroke-width="3.779" d="m21.78 12.64c-1.284 8.436 8.943 12.7 14.54 17.61 3 2.632 4.412 4.442 5.684 7.93"/><path id="b" pathLength="1" stroke-width="4.157" d="m43.19 36.32c2.817-1.203 6.659-5.482 5.441-7.623-2.251-3.957-8.883-14.69-11.89-19.73-0.4217-0.7079-0.2431-1.835 0.5931-3.3 1.358-2.38 1.956-5.628 1.956-5.628"/><path id="c" pathLength="1" stroke-width="4.535" d="m37.45 2.178s-3.946 0.6463-6.237 2.234c-0.5998 0.4156-2.696 0.7984-3.896 0.6388-17.64-2.345-29.61 14.08-25.23 27.34 4.377 13.26 22.54 25.36 39.74 8.666"/></g></svg></div>';
|
'<div class="spinner"><svg viewBox="-2 -2 54 54"><g mask="url(#mask)" fill="none"><path id="a" stroke-width="3.779" d="m21.78 12.64c-1.284 8.436 8.943 12.7 14.54 17.61 3 2.632 4.412 4.442 5.684 7.93"/><path id="b" stroke-width="4.157" d="m43.19 36.32c2.817-1.203 6.659-5.482 5.441-7.623-2.251-3.957-8.883-14.69-11.89-19.73-0.4217-0.7079-0.2431-1.835 0.5931-3.3 1.358-2.38 1.956-5.628 1.956-5.628"/><path id="c" stroke-width="4.535" d="m37.45 2.178s-3.946 0.6463-6.237 2.234c-0.5998 0.4156-2.696 0.7984-3.896 0.6388-17.64-2.345-29.61 14.08-25.23 27.34 4.377 13.26 22.54 25.36 39.74 8.666"/></g></svg></div>';
|
||||||
|
|
||||||
export default spinner;
|
export default spinner;
|
||||||
|
|
Loading…
Reference in New Issue