Progres

Pakai bilah tentu setiap kali Anda tahu berapa banyak yang tersisa — hanya itulah yang mengatakan sesuatu kepada pembacanya. Lewati value dan bilahnya justru beranimasi, yang berkata “masih bekerja” dan tidak lebih.

Tentu

stack({ gap: 'lg' },
  progress({ value: 25 }),
  progress({ value: 60 }),
  progress({ value: 100 }),
)

Tak tentu

progress()

Bilah tanpa label ditandai aria-hidden — peran progressbar tanpa nama yang dapat diakses tidak mengatakan apa pun kepada pembaca layar, jadi bilah tak berlabel diperlakukan sebagai hiasan. Beri label pada apa pun yang memang dimaksudkan untuk diikuti pembacanya.

Label

Label menamai apa yang sedang terjadi; showValue menambahkan persentasenya di sebelah kanan.

stack({ gap: 'lg' },
  progress({ value: 72, label: 'Merender halaman', showValue: true }),
  progress({ value: 30, max: 60, label: 'Mengoptimasi gambar', showValue: true }),
  progress({ label: 'Menunggu penerapan' }),
)

Warna dan tinggi

stack({ gap: 'lg' },
  progress({ value: 80, color: 'success', label: 'Lulus', showValue: true }),
  progress({ value: 45, color: 'warning', label: 'Menurun', showValue: true }),
  progress({ value: 20, color: 'danger', label: 'Gagal', showValue: true }),
  progress({ value: 60, color: 'neutral', height: 'xs' }),
  progress({ value: 60, color: 'primary', height: '1rem' }),
)

Skala selain 100

max memungkinkan Anda memberikan angka mentahnya — halaman yang sudah dibangun dari total halaman — alih-alih menghitung persentasenya lebih dulu.

progress({ value: 118, max: 169, label: '118 dari 169 halaman', showValue: true })

Menggerakkannya dari peramban

Bilahnya adalah HTML yang dirender di server: persentasenya berupa properti kustom pada isiannya dan sebuah angka di aria-valuenow, dan tidak ada di halaman itu yang mengubah keduanya sendiri. Beri bilahnya sebuah id dan setProgress memindahkan keduanya bersamaan — isiannya, nilai yang diumumkan, dan persentase di samping labelnya.

import { setProgress } from 'sitelo/ui/client'

const request = new XMLHttpRequest()

request.upload.addEventListener('progress', (event) => {
  setProgress('upload', event.loaded, { max: event.total })
})

Nilai maksimumnya diingat, jadi panggilan berikutnya cukup berupa sebuah nilai. Atau raih modulnya dengan cara yang sama seperti komponen meraih modulnya, dan lewati bundelnya sepenuhnya:

button({ onclick: "import('/su/progress.js').then(m=>m.set('upload',100))" }, 'Selesaikan')

Memberikan null — atau apa pun yang bukan angka berhingga — mengembalikan bilahnya ke animasi tak tentu, jadi pekerjaan yang berhenti melaporkan angka tidak perlu ditangani secara khusus. getProgress() membaca kembali nilai saat ini, pada skala bilahnya sendiri.

Cobalah

Halaman ini memuat runtime-nya, jadi tombol di bawah benar-benar menggerakkan bilahnya.

stack({ gap: 'md' },
  progress({ id: 'demo-progress', value: 0, label: 'Mengunggah', showValue: true }),
  stack({ direction: 'row', gap: 'sm', wrap: true },
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/progress.js').then(m=>m.set('demo-progress',0))" }, 'Setel ulang'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/progress.js').then(m=>m.set('demo-progress',35))" }, '35%'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/progress.js').then(m=>m.set('demo-progress',80))" }, '80%'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/progress.js').then(m=>m.set('demo-progress',100))" }, 'Selesai'),
    button({ size: 'sm', variant: 'ghost', onclick: "import('/su/progress.js').then(m=>m.set('demo-progress',null))" }, 'Tidak diketahui'),
  ),
)

Bilah tak berlabel ikut digerakkan, tetapi ia tetap aria-hidden — ia sengaja dirender tanpa nama, dan mengumumkan sebuah nilai padanya sekarang akan menaruh progressbar tanpa nama di pohon aksesibilitas.

Pemutar

Tidak ada komponen pemutar — pemutarnya adalah sebuah ikon, dan spin yang memutarnya. Seperti setiap ikon, ia diukur dalam em, jadi ia cocok dengan teks apa pun di sebelahnya tanpa diberi tahu ukurannya.

stack({ direction: 'row', gap: 'lg', align: 'center' },
  icon('spinner', { spin: true, size: 'sm' }),
  icon('spinner', { spin: true }),
  icon('spinner', { spin: true, size: 'lg' }),
)

Pemutar dalam konteks

Beri pemutar yang berdiri sendiri sebuah label agar ia diumumkan. Yang di dalam tombol tidak membutuhkannya — tombolnya sudah menyatakan apa yang sedang dilakukannya.

stack({ gap: 'md' },
  stack({ direction: 'row', gap: 'sm', align: 'center' },
    icon('spinner', { spin: true, label: 'Memuat' }),
    text({ variant: 'small', tone: 'muted' }, 'Mengambil build terbaru…'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    button({ loading: true }, 'Menerapkan'),
    button({ variant: 'outline', loading: true }, 'Memeriksa tautan'),
  ),
)

Props

progress() — diekspor juga sebagai progressBar:

setProgress() dari sitelo/ui/client:

Pemutarnya tidak punya props sendiri — ia adalah icon('spinner', { spin: true }), dan menerima apa pun yang diterima icon().