Componentnavigation0.55 KB gzipZero dependencies

Route Loader

Minimal top progress loader bar with smooth transit animation.

Preview

Live Preview

Route transition active

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add route-loader

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { RouteLoader } from "@/components/ui/route-loader";

<RouteLoader active={true} />

Usage guidance

Use Route Loader when a ticket stub surface needs Minimal top progress loader bar with smooth transit animation. Keep props minimal and prefer composition with sibling stubs.

Avoid Route Loader for long form flows or dense data grids where a dedicated layout block fits better.

Source code

route-loader.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface RouteLoaderProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Visible progress bar animation during route transitions */
  active: boolean;
}

/** Route progress bar: top micro loading indicator. */
export function RouteLoader({ active, className, ...props }: RouteLoaderProps) {
  return (
    <div
      className={cn("fixed inset-x-0 top-0 z-[60] h-0.5 overflow-hidden transition-opacity duration-200 motion-reduce:transition-none", active ? "opacity-100" : "opacity-0", className)}
      role="progressbar"
      aria-label="Page loading"
      {...props}
    >
      <style>{`
        @keyframes rlRun {
          0% { transform: translateX(-100%) scaleX(0.4); }
          50% { transform: translateX(30%) scaleX(0.5); }
          100% { transform: translateX(100%) scaleX(0.4); }
        }
      `}</style>
      {active && <div className="h-full w-full bg-accent" style={{ animation: "rlRun 1.2s ease-in-out infinite" }} />}
    </div>
  );
}

Props

Prop	Type	Description
active	boolean	Whether the route loading bar is running