Loading - React

Loading

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

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

import { ProgressBar } from '@idds/react';

export default function App() {
  return <ProgressBar progress={50} />;
}

import { CircleProgressBar } from '@idds/react';

export default function App() {
  return <CircleProgressBar progress={50} variant="primary" />;
}

Pilih Tema

Mencari Informasi

Mohon menunggu hasil pencarian Anda.

Default

Primary

Secondary

Positive

Warning

Negative

Static & Thick

75%

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.

Name	Type	Default	Required	Description
`className?`	`string`	`''`	No	Tambahan CSS classes.
`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.

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.
`className?`	`string`	`''`	No	ClassName tambahan.

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).
`className?`	`string`	—	No	ClassName tambahan.