Skip to main content

​
Installation

npx shadcn-svelte@next add spinner

​
Usage

<script lang="ts">
  import { Spinner } from "$lib/components/ui/spinner/index.js";
</script>

<Spinner />

​
Customization

You can replace the default spinner icon with any other icon by editing the Spinner component.

​
Examples

​
Size

Use the size-* utility class to change the size of the spinner.

​
Color

Use the text-* utility class to change the color of the spinner.

​
Button

Add a spinner to a button to indicate a loading state. The <Button /> will handle the spacing between the spinner and the text.

​
Badge

You can also use a spinner inside a badge.

​
Input Group

Input Group can have spinners inside <InputGroup.Addon>.

​
Empty

Use spinner in empty states to indicate loading.

​
Item

Use the spinner inside <Item.Media> to indicate a loading state.

​
Links

Build docs developers (and LLMs) love

Get started for freeTalk to us