Instalasi

npx shadcn-vue@latest add spinner

Penggunaan

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

<template>
  <Spinner />
</template>

Kustomisasi

Anda bisa mengganti ikon spinner bawaan dengan ikon lain, cukup dengan menyunting komponen Spinner.

Contoh

Ukuran

Pakai utility class size-* untuk mengubah ukuran spinner.

Warna

Pakai utility class text-* untuk mengubah warna spinner.

Button

Sisipkan spinner ke dalam tombol untuk menandakan proses sedang berjalan. Jarak antara spinner dan teks sudah diurus otomatis oleh <Button />.

Badge

Spinner juga bisa diletakkan di dalam badge.

Syncing

Updating

Processing

Input Group

Input Group bisa memuat spinner di dalam <InputGroupAddon>.

Validating...

Empty

Spinner juga bisa diletakkan di dalam tampilan empty state.

Processing your request

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

Item

Letakkan spinner di dalam <ItemMedia> untuk menandakan proses sedang berjalan.

Downloading...

129 MB / 1000 MB

Referensi API

Spinner

Pakai komponen Spinner untuk menampilkan indikator pemuatan.

Prop	Tipe	Bawaan
class	string

<template>
  <Spinner />
</template>