42 lines
1.1 KiB
Svelte
42 lines
1.1 KiB
Svelte
<script>
|
|
export let thickness = 8;
|
|
let classes = '';
|
|
export { classes as class };
|
|
|
|
const radius = (100 - thickness) / 2;
|
|
// the px are fake, but we need them to satisfy css calc()
|
|
const circumference = `${2 * Math.PI * radius}px`;
|
|
</script>
|
|
|
|
|
|
<svg
|
|
style:--circumference={circumference}
|
|
class={classes}
|
|
viewBox="0 0 100 100"
|
|
stroke="currentColor"
|
|
>
|
|
<circle cx="50" cy="50" r={radius} stroke-width={thickness} />
|
|
</svg>
|
|
|
|
|
|
<style>
|
|
circle {
|
|
fill: transparent;
|
|
stroke-dasharray: var(--circumference);
|
|
transform: rotate(-90deg);
|
|
transform-origin: center;
|
|
animation: chase 3s infinite,
|
|
spin 1.5s linear infinite;
|
|
}
|
|
|
|
@keyframes chase {
|
|
0% { stroke-dashoffset: calc(-1 * var(--circumference)); }
|
|
50% { stroke-dashoffset: calc(-2 * var(--circumference)); }
|
|
100% { stroke-dashoffset: calc(-3 * var(--circumference)); }
|
|
}
|
|
|
|
@keyframes spin {
|
|
50% { transform: rotate(135deg); }
|
|
100% { transform: rotate(270deg); }
|
|
}
|
|
</style> |