85 lines
1.8 KiB
XML
85 lines
1.8 KiB
XML
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
version="1.1"
|
|
>
|
|
<style>
|
|
/* these need to be injected dynamicly to match theme colors */
|
|
:root {
|
|
--primary: #222222;
|
|
--secondary: #ffffff;
|
|
--tertiary: #f15c21;
|
|
--highlight: #f0ea88;
|
|
--quaternary: #65ccff;
|
|
--success: #009900;
|
|
--animation-state: paused;
|
|
}
|
|
|
|
/* these styles need to live here because the SVG has a different scope */
|
|
.dots {
|
|
animation-name: loader;
|
|
animation-timing-function: ease-in-out;
|
|
animation-duration: 3s;
|
|
animation-iteration-count: infinite;
|
|
animation-play-state: var(--animation-state);
|
|
stroke: #fff;
|
|
stroke-width: 0.5px;
|
|
transform-origin: center;
|
|
opacity: 0;
|
|
r: max(1vw, 11px);
|
|
cy: 50%;
|
|
}
|
|
|
|
.dots:first-child {
|
|
fill: var(--tertiary);
|
|
}
|
|
|
|
.dots:nth-child(2) {
|
|
fill: var(--tertiary);
|
|
animation-delay: 0.15s;
|
|
}
|
|
|
|
.dots:nth-child(3) {
|
|
fill: var(--highlight);
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.dots:nth-child(4) {
|
|
fill: var(--quaternary);
|
|
animation-delay: 0.45s;
|
|
}
|
|
|
|
.dots:nth-child(5) {
|
|
fill: var(--quaternary);
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
@keyframes loader {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(1);
|
|
}
|
|
45% {
|
|
opacity: 1;
|
|
transform: scale(0.7);
|
|
}
|
|
65% {
|
|
opacity: 1;
|
|
transform: scale(0.7);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<g class="container">
|
|
<circle class="dots" cx="30vw" />
|
|
<circle class="dots" cx="40vw" />
|
|
<circle class="dots" cx="50vw" />
|
|
<circle class="dots" cx="60vw" />
|
|
<circle class="dots" cx="70vw" />
|
|
</g>
|
|
</svg>
|