Loading Header while Scrolling
February 26, 2015
This tutorial will teach you how to create a loading header effect while you scroll. To create this we will use both jQuery and some CSS features. This tutorials has 4 examples and i will explain in detail how each works.

Loading header while you scroll it's a growing trend in the web design industry. It's a great visual way of letting users know how much more they have to read until the end of the article.

The basic effect of changing the width of a loading bar looks good but i added some more features like loading the whole header, loading only the logo and also loading the logo and the loading bar at the same time. At the time of writing there are some tutorials out there related to this matter but from what I have seen all have some sort of issues regarding the loading, like it's not loaded at 100% when you reach the end of the article or if you resize the window the loading bar doesn't move to the proper position while you resize.


There are 4 pages in this tutorial one for each example. The text part will be the same for all 4 examples and it will look like this:

The header will be the same for examples 1,3 and 4, the second example will have a different header. This is how the header for 1,3,4 examples will look like:

This is how the header for the second example will look like:

As you can see the second example uses a text based logo while the other examples uses an image based logo. The image based ones are a little tricky because the logo is cutted out from from a picture and the logo cutout it's transparent, that's how we mange to create a loading logo effect. This is not the greatest implementation but i was forced to use this method instead of a moving background gradient on the text because background-clip CSS property was not properly supported by internet explorer.


The CSS for this tutorial doesn't have anything special and it will be the same for all examples.


Each example has it's own .js file, i will explain how each example works. The first example works by making the element "#loading" wider as you scroll down. The width of the element "#loading" will grow wider based on what percentage you scrolled of the total available scroll. How do we find out what percentage we have scrolled ? We will find this out with a simple formula, we will divide the number of pixels we have scrolled so far by the maximum possible scroll divided by 100. We get the maximum possible scroll by subtracting the window height from the document height. Finally we will use the 'scroll_percentage' variable to make the "#loading" have the necessary width. We will also put this in a function because we will activate this code when you scroll but also when you resize the window.

The second example works by having the background of the header as a gradient and moving the colors of that gradient to different points that corresponds to the scroll percentage. I have used different gradients for different browsers.

The 3rd example works just like the second example only that now we are modifying the gradient background of the logo and not the whole header.

Finally the 4th example works by modifying the width of "#loading" and making the logo load vertically instead of horizontally.

About the author
Popa Robert: Is the founder of Simbyone.com, freelance web developer and designer, he likes to create beautiful websites and water cooled PC's
April 28, 2015
Robert Popa
April 28, 2015
Thanks :)
Would you like to share your thoughts?
Fields marked with * are mandatory. We don't share your email with anyone. Email provided in the above fields are used for identification only. If you chose to subscribe to our newsletter you can cancel at any time.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Hot Posts