NavigationProgress

An indeterminate progress bar shown during page navigation.

Install

npx @beaket/ui add navigation-progress

Import

import { Navigation-progress } from "@/components/ui/navigation-progress"

Examples

States

export const AllStates = () => (
  <div className="border-chrome bg-paper relative h-32 border">
    <NavigationProgress active={true} className="!relative" />
    <div className="p-6 pt-4">
      <p className="text-steel text-sm">
        Active state — the bar slides across the top of the container.
      </p>
    </div>
  </div>
);

Props

Name	Type	Default	Description
active*	boolean	—	Whether the progress bar is active