Spinner

Installation#

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

Usage#

Copyimport { Spinner } from '@/ui/spinner';

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.