The ScrollProgress component indicates the page's current scroll depth using clean, performant SVG drawings and CSS transforms. It supports two main layout configurations (horizontal progress bar or floating circular progress widget) and multiple color schemes with custom sizes, thicknesses, and neon glows.
Live Preview
Scroll Parameters
Scroll down inside this box to test progress indicators
We built this local viewport simulator so you don't have to scroll the whole page to test. Scroll down to see progress update!
1. Creative Agency Layouts
Premium agency websites require rich, immersive layout animations that showcase work smoothly. Standard progress indicators can make a site feel rigid, which is why dynamic custom gradients and light glows add that modern, creative flare.
2. Performance Optimizations
Our scroll components are optimized to avoid layout thrashing. By utilizing hardware-accelerated CSS and Framer Motion spring solvers, updates render at a clean 60+ FPS on all screen sizes, including tablets and mobile devices.
3. Responsive Customization
Whether you choose the minimalist top bar or the clickable floating circular action button, you can customize the glow parameters, stroke width, and transition constants directly via standard props.
Installation
npx kinetic-ui-cli@latest add scroll-progressUse Cases
Combined Global Scroll Indicators
You can render both variants together in your main layout file (app/layout.tsx or similar) to give the user the best scrolling experience:
import { ScrollProgress } from '@/components/creative/scroll-progress';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{/* Top-bar progress */}
<ScrollProgress variant="bar" theme="cyber" height={4} />
<main>{children}</main>
{/* Circular indicator with scroll-to-top */}
<ScrollProgress variant="circle" theme="cyber" size={48} hideAtTop={true} />
</body>
</html>
);
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { ScrollProgress } from "@/components/creative/scroll-progress";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { ScrollProgress } from "@/components/creative/scroll-progress";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<ScrollProgress
variant{/* value */}
theme{/* value */}
height{10}
/>
</div>
);
}