<script>
import BarsSpinner from '$registry/spelte/bars-spinner.svelte';
</script>
<BarsSpinner />Installation
pnpm dlx shadcn-svelte@latest add https://spelte.dev/r/bars-spinner.json<script lang="ts">
import { cn } from '$lib/utils';
interface Props {
size?: number;
color?: string;
class?: string;
}
let { size = 20, color = 'currentColor', class: className }: Props = $props();
const bars = Array(12).fill(0);
</script>
<div
class={cn('wrapper', className)}
style="--spinner-size: {size}px; --spinner-color: {color};"
>
<div class="spinner">
{#each bars as _, i}
<div class="bar" style="--i: {i}"></div>
{/each}
</div>
</div>
<style>
.wrapper {
height: var(--spinner-size, 20px);
width: var(--spinner-size, 20px);
}
.spinner {
position: relative;
top: 50%;
left: 50%;
height: var(--spinner-size, 20px);
width: var(--spinner-size, 20px);
}
.bar {
animation: bars-spin 1.2s linear infinite;
background: var(--spinner-color);
border-radius: 6px;
height: 8%;
left: -10%;
position: absolute;
top: -3.9%;
width: 24%;
}
.bar:nth-child(1) { animation-delay: -1.2s; transform: rotate(0.0001deg) translate(146%); }
.bar:nth-child(2) { animation-delay: -1.1s; transform: rotate(30deg) translate(146%); }
.bar:nth-child(3) { animation-delay: -1s; transform: rotate(60deg) translate(146%); }
.bar:nth-child(4) { animation-delay: -0.9s; transform: rotate(90deg) translate(146%); }
.bar:nth-child(5) { animation-delay: -0.8s; transform: rotate(120deg) translate(146%); }
.bar:nth-child(6) { animation-delay: -0.7s; transform: rotate(150deg) translate(146%); }
.bar:nth-child(7) { animation-delay: -0.6s; transform: rotate(180deg) translate(146%); }
.bar:nth-child(8) { animation-delay: -0.5s; transform: rotate(210deg) translate(146%); }
.bar:nth-child(9) { animation-delay: -0.4s; transform: rotate(240deg) translate(146%); }
.bar:nth-child(10) { animation-delay: -0.3s; transform: rotate(270deg) translate(146%); }
.bar:nth-child(11) { animation-delay: -0.2s; transform: rotate(300deg) translate(146%); }
.bar:nth-child(12) { animation-delay: -0.1s; transform: rotate(330deg) translate(146%); }
</style>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 20 | Size in pixels |
color | string | "currentColor" | Bar color |
class | string | — | Additional CSS classes |