DEV Community

Sunder Mehra
Sunder Mehra

Posted on • Edited on

Scroll watcher progress timeline bar in easy step.

Scroll watcher is a progress bar which check for the scroll bar. It act as a custom progess 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.

Image description

2- We are at the end of webpage.

Image description

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;
  }
Enter fullscreen mode Exit fullscreen mode

Once done, you will get this result:

Image description

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%}
  }
Enter fullscreen mode Exit fullscreen mode

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();
}


Enter fullscreen mode Exit fullscreen mode

Thanks,
Feel free to ask any queries.

Top comments (1)

Collapse
 
d7460n profile image
D7460N

Nice! Thanks for sharing!

What if the scroll progress line was a circle and an href was added for a click to scroll back to top? Practical and now interactive!

WDYT?