ProgressBar

Progress bar liquid-tube dengan animasi gelembung, berdiri sendiri atau dipakai internal oleh LoadingCard.

Bagian dari: vue-salayout · Family: Feedback

---

Import

import { ProgressBar } from '@bpmlib/vue-salayout';

Instalasi: lihat Installation & Setup di halaman utama.

---

Usage

<script setup lang="ts">
import { ProgressBar } from '@bpmlib/vue-salayout';
</script>

<template>
  <ProgressBar :progress="0.6" color="success" percentage />
</template>

---

API Reference

Component ini tidak dibangun di atas useCardFoundation — bukan bagian dari struktur region Card, hanya reuse mekanisme resolusi warna (accentClass) yang sama.

ProgressBar

Props

Name	Type	Default	Description
progress	boolean | number	(wajib)	number (0-1): width manual. true: trickle otomatis ala NProgress menuju 90% Lihat selengkapnya
color	CardAccent	'primary'	Warna liquid fill; gelembung otomatis jadi shade lebih gelap dari family yang sama
flush	boolean	false	false: pill penuh (rounded-full), untuk pemakaian standalone. true: rounded hanya tl/br, menyamai region children milik Card Lihat selengkapnya
percentage	boolean | 'left' | 'right' | 'follow'	false	Tampilkan teks persentase Lihat selengkapnya

progress

Tidak ada default — bar standalone tidak punya state "off" yang masuk akal, keputusan itu ada di consumer yang me-render-nya.

Contoh:

<!-- manual -->
<ProgressBar :progress="0.75" />

<!-- trickle otomatis, berhenti di 90% sampai diset selesai -->
<ProgressBar :progress="true" />

Use Case: number untuk progress yang bisa diukur pasti; true untuk operasi async yang durasinya tidak diketahui di awal.

flush

Contoh:

<ProgressBar :progress="0.5" flush />

Use Case: Dipakai saat bar ditempatkan flush di dalam region lain yang sudah py-2px-4 sendiri (seperti yang dilakukan LoadingCard secara otomatis) — pill penuh akan terlihat janggal di konteks itu.

percentage

true adalah alias untuk 'follow': teks persentase mengikuti ujung fill, berhenti sebelum tepi kanan supaya tidak terpotong border saat mendekati 100%. 'left'/'right' menempel di tepi tersebut terlepas dari posisi fill. Teks otomatis kontras terhadap apa pun di belakangnya (track kosong, liquid, atau seam di antaranya) lewat mix-blend-mode, jadi legibility tidak bergantung pada color yang dipakai.

Contoh:

<ProgressBar :progress="0.42" percentage="left" />

Slots

Name	Props	Description
percentage	{ percent: number }	Override teks ${percent}%, posisi tetap mengikuti prop percentage

Contoh:

<ProgressBar :progress="0.8" percentage>
  <template #percentage="{ percent }">
    <span>{{ percent }}% selesai</span>
  </template>
</ProgressBar>

---

Examples

1. Manual vs Trickle Otomatis

<ProgressBar :progress="0.35" />
<ProgressBar :progress="true" />

2. Flush di Dalam Region Lain

<div class="p-2">
  <ProgressBar :progress="0.5" flush color="danger" />
</div>

---

Styling

Styling sepenuhnya self-contained — lihat Import CSS di halaman utama.

CSS Variables

Warna mengikuti token CardAccent yang sama dengan BasicCard — lihat Accent Palette & alt Shading. Track sendiri selalu memakai --color-card-alt sebagai warna channel kosong, terlepas dari color yang dipakai untuk liquid fill.

---

Used By / Built On

Used by: LoadingCard — dipasang otomatis (dengan flush) saat prop progress diset.

Related Components

Bagian dari family Feedback:

• LoadingCard — komposisi icon + judul + ProgressBar
• NotificationCard — kartu status, bukan progress