Live Docs

Feedback /

stable

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

PropTypeDefaultDescription
variant"morph" | "morph5" | "assemble""morph"Gaya animasi: morph (2 dot), morph5 (5 dot→tiap facet), assemble (facet build-up).
labelReactNode"Memuat..."Teks di bawah logo. null = sembunyikan.
fullscreenbooleantruetrue = fixed full-screen; false = mengisi parent ber-position.
size"xs" | "sm" | "md" | "lg" | "xl""xl"Ukuran logo.
classNamestringClass 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

Accessibility

  • Container memakai role='status' + aria-live='polite' + aria-busy='true'.
  • Animasi dimatikan otomatis saat prefers-reduced-motion: reduce.
  • Unmount loader setelah konten siap agar screen reader berpindah fokus ke konten.