A simple page scroll progress component made with React.
Create a new file called ScrollProgress.tsx
then copy and paste the component below into the file.
import { useState, useEffect } from 'react';
interface ScrollProgressProps {
position: 'top' | 'bottom'
height?: number
zIndex?: number
backgroundColor?: string
gradient?: {
start: string
end: string
}
}
export default function ScrollProgress(props: ScrollProgressProps) {
const {
position,
height,
backgroundColor,
gradient,
zIndex
} = props
const [scrollPercentage, setScrollPercentage] = useState(0)
function handleScroll() {
const scrollY = window.scrollY
const windowHeight = window.innerHeight
const documentHeight = document.documentElement.scrollHeight
const percentage = (scrollY / (documentHeight - windowHeight)) * 100
setScrollPercentage(percentage)
}
useEffect(() => {
window.addEventListener('scroll', handleScroll)
return () => {
window.removeEventListener('scroll', handleScroll)
}
}, [])
return (
<div
style={{
width: '100%',
position: 'fixed',
left: '0',
right: '0',
top: position === 'top' ? '0' : 'auto',
bottom: position === 'bottom' ? '0' : 'auto',
zIndex: zIndex ? zIndex : 9999,
}}
>
<div
style={{
height: `${height}px` ?? '5px',
width: `${scrollPercentage}%`,
transition: 'width 0.1s',
backgroundColor: `${backgroundColor}`,
background: `linear-gradient(45deg, ${gradient?.start}, ${gradient?.end})`,
}}
/>
</div>
)
}
Add the ScrollProgress
component to the page you'd like the scroll progress bar to appear.
import ScrollProgress from "./components/scroll-progress";
const App = () => {
return (
<div>
<ScrollProgress
position="top"
height={6}
gradient={{
start: "green",
end: "blue"
}}
/>
</div>
);
};