9.7k

Spinner

PreviousNext

An indicator that can be used to show a loading state.

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import { VSpinner } from '@ui-kit/src/components/Base/VSpinner'
</script>

<template>
  <div class="relative h-8 w-8">
    <VSpinner show />
  </div>
</template>

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.

Swap the icon inside the spinner component to customize it.
<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import { VSpinner } from '@ui-kit/src/components/Base/VSpinner'
</script>

<template>
  <div class="flex items-center gap-3">
    <div class="relative h-6 w-6">
      <VSpinner show small />
    </div>
    <span>Swap the icon inside the spinner component to customize it.</span>
  </div>
</template>

Examples

Size

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

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import { VSpinner } from '@ui-kit/src/components/Base/VSpinner'
</script>

<template>
  <div class="flex items-center gap-6">
    <div class="relative h-5 w-5">
      <VSpinner show small />
    </div>
    <div class="relative h-8 w-8">
      <VSpinner show />
    </div>
  </div>
</template>

Color

Use the text-* utility class to change the color of the spinner.

Spinner inherits its color from the surrounding context.
<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import { VSpinner } from '@ui-kit/src/components/Base/VSpinner'
</script>

<template>
  <div class="flex items-center gap-3">
    <div class="relative h-8 w-8">
      <VSpinner show />
    </div>
    <span>Spinner inherits its color from the surrounding context.</span>
  </div>
</template>

Button

Add a spinner to a button to indicate a loading state. The <Button /> will handle the spacing between the spinner and the text.

Submitting
<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import { VSpinner } from '@ui-kit/src/components/Base/VSpinner'
</script>

<template>
  <div class="flex items-center gap-3">
    <span>Submitting</span>
    <div class="relative h-4 w-4">
      <VSpinner show small />
    </div>
  </div>
</template>

Badge

You can also use a spinner inside a badge.

Syncing badge
<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import { VSpinner } from '@ui-kit/src/components/Base/VSpinner'
</script>

<template>
  <div class="flex items-center gap-3">
    <span>Syncing badge</span>
    <div class="relative h-4 w-4">
      <VSpinner show small />
    </div>
  </div>
</template>

Input Group

Input Group can have spinners inside <InputGroupAddon>.

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import { VSpinner } from '@ui-kit/src/components/Base/VSpinner'
</script>

<template>
  <div class="flex w-full max-w-sm items-center gap-3">
    <input class="w-full" placeholder="Search records...">
    <div class="relative h-5 w-5">
      <VSpinner show small />
    </div>
  </div>
</template>

Empty

You can place a spinner inside an empty state.

Loading state
<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import { VSpinner } from '@ui-kit/src/components/Base/VSpinner'
</script>

<template>
  <div class="flex items-center gap-3">
    <span>Loading state</span>
    <div class="relative h-8 w-8">
      <VSpinner show />
    </div>
  </div>
</template>

Item

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

Processing portfolio update 
<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import { VSpinner } from '@ui-kit/src/components/Base/VSpinner'
</script>

<template>
  <div class="flex w-full max-w-sm items-center gap-3">
    <div class="relative h-5 w-5">
      <VSpinner show small />
    </div>
    Processing portfolio update
  </div>
</template>

API Reference

Spinner

Use the Spinner component to display a spinner.

PropTypeDefault
classstring
<template>
  <Spinner />
</template>
SonnerStepper