huntabyte__shadcn-svelte/docs/content/components/spinner.md

title, description, component, links

title	description	component	links
Spinner	An indicator that can be used to show a loading state.	true	source https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/spinner

<script> import ComponentPreview from "$lib/components/component-preview.svelte"; import ComponentSource from "$lib/components/component-source.svelte"; import PMAddComp from "$lib/components/pm-add-comp.svelte"; import PMInstall from "$lib/components/pm-install.svelte"; import Steps from "$lib/components/steps.svelte"; import InstallTabs from "$lib/components/install-tabs.svelte"; let { viewerData } = $props(); import Step from "$lib/components/step.svelte"; </script>

Installation

{#snippet cli()} {/snippet} {#snippet manual()}

Install @lucide/svelte:

Copy and paste the following code into your project.

{#if viewerData} {/if} {/snippet}

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

Item

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