Loading - Vue

Loading

Impor

Spinner

import { Spinner } from '@idds/vue';

Skeleton

import { Skeleton } from '@idds/vue';

ProgressBar

<template>
  <ProgressBar :progress="50" />
</template>

<script setup>
import { ProgressBar } from '@idds/vue';
</script>

CircleProgressBar

<template>
  <CircleProgressBar :progress="50" variant="primary" />
</template>

<script setup>
import { CircleProgressBar } from '@idds/vue';
</script>

Contoh Penggunaan

Contoh 1 - Spinner: Basic

Contoh 2 - Spinner: With Title & Subtitle

Contoh 3 - Skeleton: Multiple Variants

Contoh 4 - ProgressBar: Basic

Contoh 5 - ProgressBar: With Different Variants

Contoh 6 - CircleProgressBar: Basic & Variants

Props

Spinner

Name	Type	Default	Required	Description
`size?`	`number`	`32`	No	Diameter spinner dalam pixel.
`borderWidth?`	`'thin' \| 'medium' \| 'thick' \| 'heavy'`	`'medium'`	No	Lebar border spinner.
`trackColor?`	`'gray' \| 'light' \| 'dark'`	`'gray'`	No	Warna track spinner.
`color?`	`'primary' \| 'secondary' \| 'success' \| 'error' \| 'warning' \| 'info' \| 'inherit'`	`'primary'`	No	Warna spinner.
`title?`	`string`	`'Mencari Informasi'`	No	Judul di bawah spinner.
`subtitle?`	`string`	`'Mohon menunggu hasil pencarian Anda.'`	No	Subtitle di bawah title.
`spinnerOnly?`	`boolean`	`false`	No	Jika true, hanya tampilkan spinner tanpa title dan subtitle.
`ariaLabel?`	`string`	`'Loading'`	No	Aria label untuk aksesibilitas.

Skeleton

Name	Type	Default	Required	Description
`class?`	`string`	`''`	No	HTML standard class attribute (fallthrough).
`color?`	`'gray' \| 'blue' \| 'green' \| 'red' \| 'yellow'`	`'gray'`	No	Base background color.
`width?`	`string`	—	No	CSS width value (opsional, jika tidak ada akan flex: 1).
`height?`	`string`	`'32px'`	No	CSS height value.
`rounded?`	`'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`	No	Border radius size.

ProgressBar

Name	Type	Default	Required	Description
`visible?`	`boolean`	`true`	No	Apakah progress bar terlihat.
`progress?`	`number`	`0`	No	Progress percentage (0-100).
`duration?`	`number`	`1000`	No	Durasi animasi dalam milidetik.
`variant?`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error'`	`'primary'`	No	Color variant.
`height?`	`'sm' \| 'md' \| 'lg'`	`'sm'`	No	Tinggi progress bar.
`shimmer?`	`boolean`	`true`	No	Apakah menampilkan efek shimmer animasi.
`class?`	`string`	`''`	No	HTML standard class attribute (fallthrough).

CircleProgressBar

Name	Type	Default	Required	Description
`progress?`	`number`	`0`	No	Nilai progress (0-100).
`diameter?`	`number`	`20`	No	Diameter lingkaran dalam pixel.
`strokeWidth?`	`number`	`3`	No	Ketebalan garis lingkaran dalam pixel.
`variant?`	`'primary' \| 'secondary' \| 'positive' \| 'warning' \| 'negative' \| string`	`'primary'`	No	Varian warna atau hex color.
`trackColor?`	`string`	`'#EAECF0'`	No	Warna track (lingkaran latar belakang).
`class?`	`string`	`''`	No	HTML standard class attribute (fallthrough).