Spinner

Installation#

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

Usage#

Copy<script setup lang="ts">
import { Spinner } from "@/components/ui/Spinner"
</script>
 
<template>
  <Spinner />
</template>

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.