Branded Loader

Layar loading ber-brand: logo Naraya animasi (3 variant — morph / morph5 / assemble) + bar indeterminate. Untuk splash / initial app load.

import { BrandedLoader } from "@naraya/ui/branded-loader";

Examples

Variants animasi

morph

morph5

assemble

<BrandedLoader variant="morph" />      {/* default: 2 dot orbit → morph */}
<BrandedLoader variant="morph5" />     {/* 5 dot → morph ke tiap facet */}
<BrandedLoader variant="assemble" />   {/* facet logo masuk satu-per-satu */}

Inline (mengisi parent)

Memuat...

// Full-screen splash (default):
<BrandedLoader />

// Mengisi container ber-position relative:
<div style={{ position: "relative", minHeight: "18rem" }}>
  <BrandedLoader fullscreen={false} />
</div>

Custom label & size

Menyiapkan dashboard...

<BrandedLoader size="lg" label="Menyiapkan dashboard..." />

Tanpa label

<BrandedLoader label={null} />

Usage

Pakai sebagai full-screen splash saat aplikasi pertama dimuat, lalu unmount setelah siap. Untuk overlay loading di bagian/section tertentu (mis. saat fetch), pakai fullscreen={false} di dalam container position: relative. Animasi morph pakai engine path-interpolation (flubber), jadi komponen ini di-import dari subpath @naraya/ui/branded-loader (bukan barrel) supaya lib morph-nya gak ke-bundle buat yang gak pakai.

Props

Prop	Type	Default	Description
variant	`"morph" \| "morph5" \| "assemble"`	`"morph"`	Gaya animasi: morph (2 dot), morph5 (5 dot→tiap facet), assemble (facet build-up).
label	`ReactNode`	`"Memuat..."`	Teks di bawah logo. null = sembunyikan.
fullscreen	`boolean`	`true`	true = fixed full-screen; false = mengisi parent ber-position.
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"xl"`	Ukuran logo.
className	`string`	—	Class tambahan wrapper.

Tokens Used

--bg-app

Latar layar loader

--color-primary

Bar indeterminate + path logo

--bg-muted

Track bar

--text-muted

Label

--easing-smooth

Easing bar indeterminate

Branded Loader

Examples

Usage

Props

Tokens Used

Accessibility

Related