LoadingCard

Indikator loading dengan icon + judul (+ waktu berjalan opsional), dengan ProgressBar komposit opsional.

Bagian dari: vue-salayout · Family: Feedback

---

Import

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

Instalasi: lihat Installation & Setup di halaman utama.

---

Usage

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

<template>
  <LoadingCard title="Mengambil data..." with-time :progress="0.4" />
</template>

---

API Reference

NOTE

Dibangun di atas useCardFoundation (region body/children, sama seperti BasicCard) dan composable internal useLoadingIcon. Tidak diekspos publik.

LoadingCard

Cara Penggunaan:

Icon, judul, dan (opsional) waktu berjalan render langsung di region body — bukan lewat slot. Slot publik body milik component ini (untuk konten tambahan) justru berada di dalam region children, bersama ProgressBar kalau progress diset. Region children hanya muncul kalau slot body diisi atau progress diset.

Props

Name	Type	Default	Description
iconType	'truck' | 'find' | 'cog'	'truck'	Icon default bawaan + animasinya. Diabaikan kalau image atau slot icon diisi
image	string	-	URL gambar custom (gif/png/dst), di-render sebagai <img>. Menang atas iconType, kalah dari slot icon
title	string	'Mengambil Data... Harap Tunggu Sebentar'	Judul di bawah icon
withTime	boolean	false	Tampilkan waktu berjalan, update tiap detik
compact	boolean	false	Layout horizontal (icon kiri, teks kanan, flex-1) alih-alih stacked/center
progress	boolean | number	-	Render ProgressBar kalau diset. number (0-1): width manual. true: trickle otomatis Lihat selengkapnya
barColor	CardAccent	'primary'	Diteruskan ke prop color milik ProgressBar internal
color	CardColor	'card'	Warna body, atau map warna body/children
bodyColor	CardAccent	'card'	Warna region body, menang atas color
childrenColor	CardAccent	(family body)	Warna region children, menang atas color.children
alt	CardToggle	false	Toggle shade -alt untuk body/children
noPadding	CardToggle	false	Hilangkan padding per region
noAnimate	boolean	false	Matikan animasi fade-in-up saat kartu muncul
overflowing	boolean	false	Clip konten yang melebihi wrapper luar

progress

Diteruskan langsung ke prop progress milik ProgressBar internal — lihat halaman tersebut untuk detail mode manual vs. trickle otomatis.

Contoh:

<!-- manual, 65% -->
<LoadingCard title="Mengunggah berkas..." :progress="0.65" />

<!-- trickle otomatis -->
<LoadingCard title="Menyinkronkan..." :progress="true" />

Use Case: number cocok saat progress bisa diukur pasti (upload, download); true cocok saat progress tidak diketahui pastinya (request async tanpa event progress).

Slots

Name	Description
icon	Override penuh icon, menang atas image/iconType
body	Konten tambahan, di dalam region children, di samping ProgressBar

Contoh:

<LoadingCard title="Memuat laporan..." :progress="0.3">
  <template #body>
    <p>Ini bisa memakan waktu beberapa menit.</p>
  </template>
</LoadingCard>

Events

Name	Payload	Description
loadingTime	{ seconds: number; stringTime: string; startTime: Date }	Emit saat unmount dengan total waktu berjalan

---

Examples

1. Icon Type & Layout Compact

<LoadingCard icon-type="find" title="Mencari data..." compact />

2. Custom Image

<LoadingCard image="https://example.com/loading.gif" title="Memuat..." />

---

Styling

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

CSS Variables

Gradient background body mengikuti --color-primary/--color-primary-alt (bukan barColor) — warna region lain mengikuti token yang sama dengan BasicCard, lihat Accent Palette & alt Shading.

---

Used By / Built On

Built on: ProgressBar — dipasang otomatis di region children saat prop progress diset, dengan corner flush (bukan pill).

Related Components

Bagian dari family Feedback:

• ProgressBar — bisa dipakai berdiri sendiri di luar LoadingCard
• NotificationCard — kartu status, bukan loading