Spinner

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-svelte/spinner
Copy

Usage#

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

Copy<Spinner />

Customization#

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

Examples#

Colors#

Sizes#

Size#

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

Button#

Add a spinner to a button to indicate a loading state. Place the <Spinner /> before the label with data-icon="inline-start" for a start position, or after the label with data-icon="inline-end" for an end position.

Badge#

Add a spinner to a badge to indicate a loading state. Place the <Spinner /> before the label with data-icon="inline-start" for a start position, or after the label with data-icon="inline-end" for an end position.

Input Group#

Empty#

API#

Spinner#

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.