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.