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.
HTMLThere 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.
CSSThe CSS for this tutorial doesn't have anything special and it will be the same for all examples.
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.