You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.1 KiB
51 lines
1.1 KiB
<style>
|
|
.spinner {
|
|
animation: rotate 6s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export let size="48";
|
|
export let fill="none";
|
|
export let color="var(--color)";
|
|
export let width="3";
|
|
export let linecap="round";
|
|
export let linejoin="round";
|
|
export let name="loader";
|
|
export let inactive=false;
|
|
export let aspect_ratio=false;
|
|
</script>
|
|
|
|
{#if aspect_ratio}
|
|
<div style="--aspect-ratio: { aspect_ratio }; overflow: hidden;">
|
|
<svg data-testid="spinner" class="spinner" class:inactive={inactive}
|
|
width={size}
|
|
height={size / 2}
|
|
fill={fill}
|
|
stroke={color}
|
|
stroke-width={width}
|
|
stroke-linecap={linecap}
|
|
stroke-linejoin={linejoin}
|
|
>
|
|
<use href="/icon-sprites.svg#{name}" />
|
|
</svg>
|
|
</div>
|
|
{:else}
|
|
<svg data-testid="spinner" class="spinner" class:inactive={inactive}
|
|
width={size}
|
|
height={size}
|
|
fill={fill}
|
|
stroke={color}
|
|
stroke-width={width}
|
|
stroke-linecap={linecap}
|
|
stroke-linejoin={linejoin}
|
|
>
|
|
<use href="/icon-sprites.svg#{name}" />
|
|
</svg>
|
|
{/if}
|
|
|