Installation

pnpm dlx kliping@latest add spinner

Usage

<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.

Examples

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

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0
Files	components/ui/spinner/spinner.vue components/ui/spinner/index.ts

API Reference

Spinner

Pakai komponen Spinner untuk menampilkan indikator pemuatan.

Tidak punya props, events, atau slot sendiri.

<template>
  <Spinner />
</template>

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.