Installation

pnpm dlx shadcn-vue@latest add spinner

Usage

<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

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.

Syncing

Updating

Processing

Input Group

Input Group can have spinners inside <InputGroupAddon>.

Validating...

Empty

Processing your request

Please wait while we process your request. Do not refresh the page.

Item

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

Downloading...

129 MB / 1000 MB

API Reference

Spinner

Use the Spinner component to display a spinner.

Prop	Type	Default
class	string	``

<Spinner />