Amazing Pure CSS Scrolling Indicator Effect

An interesting question is how to implement the following scrollbar effect using CSS?

It is the yellow scrolling progress bar at the top, which changes in length as the page scrolls.

Before continuing to read below, you can take a moment. Try to think about the above effect or try it yourself, whether you can achieve the above effect skillfully without using JavaScript.

OK, this effect is a similar little problem I encountered in the process of my daily development. In fact, even if we can use Javascript, it feels very troublesome. So I’ve been wondering, is it possible to accomplish this effect using only CSS?

Analyze requirements

The first time I saw this effect, I felt that this scrolling animation could not be accomplished with CSS alone, because it involved the calculation of the scrolling distance of the page.

If you want to do it only with CSS, you have to find another way and use some clever methods.

Well, let’s use CSS to achieve this effect step by step with the help of some tricks and tricks. Analyze the difficulty:

How to know how far the user is currently scrolling the page and notify the top progress bar?

Normal analysis should be like this, but this falls into traditional thinking. The progress bar is just the progress bar, receiving the scrolling distance of the page and changing the width. What if the page scrolling and the progress bar were a whole?

Fulfill the requirement

Let’s not sell it, let’s use linear-gradients to achieve this function.

Assuming our page is wrapped <body> in , the entire body can be scrolled, and add this linear gradient from bottom left to top right to it:


 CSS
body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}

Then, we can get an effect like this:

Wow, the color change of the yellow block can actually express the overall progress. In fact, here, wise you should already know what to do next.

We use a pseudo-element to cover the extra part:



body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}

In order to facilitate the demonstration, I changed the white base above to a black transparent base:：

The actual effect is as follows:

Those who are careful may notice that the progress bar does not end when the page scroll to the end.

The reason is that because bodythe height of the linear gradient sets the size of the entire body, let's adjust the height of the gradient:


 CSS
body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}

Here, the operation calc is performed , and subtraction 100vh, that is, the height of a screen is subtracted, so that the gradient just fits the upper right corner when it slides to the bottom.

And + 5px is the height of the scrolling progress bar, reserved for 5px the height of . Take a look at the effect, perfect:

So far, this requirement has been fulfilled perfectly, which is a good trick, complete Demo:

CodePen Demo -- Using Linear-Gradient Implement Scrolling Indicator Effect

Finally

More wonderful CSS technical articles are summarized in my
Github-iCSS.

Well, that’s all for this article, I hope it helps you. :)

Blog

Amazing Pure CSS Scrolling Indicator Effect

Coco

Analyze requirements

Fulfill the requirement

Finally

Join Our Newsletter. No Spam, Only the good stuff.

Related