Colorize the logo spinner and add animation
Albert Ford
parent
f79dd829ea
commit
26ccf278fa
|
|
@ -51,6 +51,6 @@ object Environment
|
|||
)
|
||||
|
||||
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 */
|
||||
$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 {
|
||||
|
|
|
|||
|
|
@ -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 }))
|
||||
),
|
||||
]),
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue