This content originally appeared on DEV Community and was authored by Sunder Mehra
Scroll watcher is a progress bar which check for the scroll bar. It act as a bar which indicates 0% as the start of webpage and 100% as the end of webpage.
example:
1- We are at the top of webpage.
2- We are at the end of webpage.
HTML:-
Just add a div with class name.
<div className="scroll-watcher"></div>
CSS:-
1- Make div with some initial height, i have given of 5px and width of 100%
2- Choose color of as you like.
3- Give z-index of max so that our scroll watcher do not go behind any other component. It should be at the top.
4- Scroll watcher should be sticked to the top of the page.
5- I have given "margin:auto" to make the scroller at the top-center.
.scroll-watcher{
height: 5px;
background-color: rgb(110, 36, 213);
border-radius: 15px;
position: sticky;
width: 100%;
z-index: 999;
margin: auto;
top: 0;
}
Once done, you will get this result:
Now its time to add animation.
Add keyframe with from and to. from indicates what will be the initial width and to indicates what will be final width.
@keyframes scroll-watcher {
from{width:5%}
to{width:100%}
}
Now add the animation property for scroller.
1- Give animation name and animation property here i have given linear.
animation: scroll-watcher linear;
2- Give animation timeline, Here scroll show that animation will work
when you are scrolling.
animation-timeline: scroll();
So the final CSS will be
.scroll-watcher {
height: 5px;
background-color: rgb(110, 36, 213);
border-radius: 15px;
position: sticky;
width: 100%;
z-index: 1000;
margin: auto;
top: 0;
animation: scroll-watcher linear;
animation-timeline: scroll();
}
Thanks,
Feel free to ask any queries.
This content originally appeared on DEV Community and was authored by Sunder Mehra
Sunder Mehra | Sciencx (2024-06-16T15:59:27+00:00) Scroll progress timeline bar in easy step.. Retrieved from https://www.scien.cx/2024/06/16/scroll-progress-timeline-bar-in-easy-step/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.