NavigationProgress

A top-of-page progress bar that shows during route navigation

Live Demo

Progress Bar Animation

Click the button to simulate a page navigation

Props:
{ progress: "0%" }
Progress bar will appear here

Animation Phases

0-30%
Fast Phase
Quick initial progress to show immediate feedback
30-70%
Slow Phase
Slower progress during main loading period
70-100%
Accelerating
Speed up as navigation completes

Features

Auto-triggered

Automatically shows on route changes

Props:
{ trigger: "auto" }
  • • Link clicks (internal navigation)
  • • Browser back/forward buttons
  • • Programmatic navigation (router.push)

Smart Completion

Handles navigation completion gracefully

Props:
{ completion: "smart" }
  • • Jumps to 100% when route changes
  • • 8-second timeout for stuck navigations
  • • Fade-out animation on completion

Responsive

Adapts to any screen width

Props:
{ width: "100vw" }
  • • Background image scales to viewport
  • • Works on mobile to ultra-wide screens
  • • Fixed 27px height

Performance

Optimized for smooth animations

Props:
{ performance: "optimized" }
  • • Uses CSS transitions (GPU accelerated)
  • • Refs instead of state for updates
  • • No re-renders during animation

Usage

Import

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

Add to Root Layout

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Suspense fallback={null}>
          <NavigationProgress />
        </Suspense>
        {children}
      </body>
    </html>
  );
}

Programmatic Trigger

// Dispatch custom event before programmatic navigation
window.dispatchEvent(new Event('navigationStart'));
router.push('/new-page');

CSS Classes

.navigation-progress-containerFixed container at top of viewport (27px height, z-index: 99999)
.navigation-progress-barProgress bar with background image (loading.png), right-aligned
.fade-outApplied during fade-out animation (opacity: 0, 300ms transition)