Scroll watcher progress timeline bar in easy step.

#webdev #beginners #css #html

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.

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