NavigationProgress

An indeterminate progress bar shown during page navigation.

$ npx @beaket/ui add navigation-progress

Source

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

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

export default () => (
  <div className="relative h-6">
    <NavigationProgress active={true} className="!relative" />
  </div>
);

Examples

Active state — the bar slides across the top of the container.

Source

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

export default () => (
  <div className="border-border bg-bg relative h-32 border">
    <NavigationProgress active={true} className="!relative" />
    <div className="p-6 pt-4">
      <p className="text-fg-muted 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

Examples

All States

Props