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.

52 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}