Copy page

Components

LoadingBar

src/lib/components/ui/loading-bar/loading-bar.svelte

Purpose

Indeterminate loading indicator that animates a short bar across a track. Use it for in-progress async operations that have no determinate progress value — e.g. route transitions, lazy module loads, or while a fetch is in flight. The animation is driven by the pb-loading-bar keyframe and exposes CSS variables for duration and easing.

Origin

Custom — Primebrick-built primitive. Variants are defined with tailwind-variants (loadingBarVariants).

Usage

Default (xs, muted)

Code
<script lang="ts">
  import { LoadingBar } from "$lib/components/ui/loading-bar";
</script>

<LoadingBar />

Larger size with custom duration

Code
<LoadingBar size="sm" duration="2s" easing="linear" />

Custom bar color

Code
<LoadingBar barClass="bg-success" />

Inline at the top of a card

Code
<div class="rounded-xl border">
  <LoadingBar />
  <div class="p-4">Card content…</div>
</div>

Props

Full prop table: see API reference — loadingbar.

Key props:

• size ("xs" | "sm", default "xs") — track height.
• variant ("muted", default "muted") — track background.
• duration (string, default "1.2s") — CSS var --pb-loading-bar-duration.
• easing (string, default "ease-in-out") — CSS var --pb-loading-bar-easing.
• barClass (string) — extra classes for the animated bar (e.g. bg-success).
• class — extra classes for the track.

Next steps

• MetadataLoading
• Component catalog
• UI stack
• API reference