About
A top-of-page loading progress bar that trickles while async tasks (page navigations, requests) are pending and completes to 100% before fading out, ported from Navid Jaberi's vue-smart-loading-kit (MIT).
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Page Progress to your project and fits it to your theme.
Code
How Page Progress is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import * as React from "react";
import PageProgress, {
createPageProgress,
type PageProgress as PageProgressController,
} from "@/components/ui/page-progress";
export default function PageProgressDemo() {
const progressRef = React.useRef<PageProgressController>();
if (!progressRef.current) progressRef.current = createPageProgress();
const simulateLoad = () => {
const progress = progressRef.current!;
progress.start();
setTimeout(() => progress.done(), 1600);
};
return (
<div className="w-full h-screen flex items-center justify-center bg-background text-foreground">
<PageProgress
progress={progressRef.current}
color="#6366f1"
thickness={3}
label="Loading"
/>
<button
onClick={simulateLoad}
className="rounded-md border border-border bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition hover:opacity-90"
>
Simulate page load
</button>
</div>
);
}
More by navidjaberi
View all
Loading Spinner
30