Page Loading Effects

A set of creative page loading effects that use SVG animations with Snap.svg. The idea is to show an overlay with a interesting shape animation while new content gets loaded.

If you have visited the brilliantly designed websites of Nicolas Zezuka and Active Theory you might have noticed the slick loading animations that happen before new content is displayed. This kind of loading style is quite trendy lately and we wanted to give you some inspiration. The idea is to animate a shape into the viewport and show an activity indicator. When the new content is loaded, the shape will animate back to reveal the page. We’ll use animated SVGs with Snap.svg for the effects because this allows us to create complex shapes and interesting morphing transitions.

Please also note that the examples only serve for your inspiration. We haven’t implemented any fallbacks and we “fake” the dynamic loading of new content. Also note that we are animating SVGs and pseudo-elements which might not work well in some browsers.

The way we show the loading overlay is by defining an animation on a path that we define in the following SVG:

<div id="loader" class="pageload-overlay" data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10">
	<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
		<path d="M 0,70 80,60 80,80 0,80 0,70"/>
	</svg>
</div><!-- /pageload-overlay -->

We define an initial path that is not visible in the viewport inside of the SVG and a opening and closing path in data attributes on the pageload-overlay division. As you can see, we are using a small viewBox but we stretch the drawing to 100% of the window width and height while not preserving the aspect ratio. If we don’t have a closing path defined, we’ll animate back to the intial path.

Note that we can also add more than one path (separated by a semicolon) which allows for a step wise animation of the SVG drawing like you can see in the first demo.

We set the overlay division to a fixed position, covering all the page, and use a CSS-only loading indicator by styling the ::before and ::after pseudo elements of the division.

.pageload-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
}

.pageload-overlay.show {
	visibility: visible;
}

.pageload-overlay svg {
	position: absolute;
	top: 0;
	left: 0;
}

.pageload-overlay svg path {
	fill: #fff;
}

We use visibility here because using those fixed positioning styles with pointer-events none on the SVG itself causes some trouble on mobile, so we position and manipulate the parent div instead.

You might have noticed that the circle animations is also done by animating from one path to another (there are of course other ways of doing this, scaling for example) but we used the following values to make sure the circle is “responsive” but does not stretch like the other shapes:

width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice"	

Using slice will preserve the aspect ratio but scale the drawing so that the entire viewport is covered by the viewBox.

We’ve only created a bunch of effects, but as you can see, the possibilities are endless.

We really hope you enjoy them and find them inspiring.

The featured image was created with this iMac/Macbook PSD mockup from Pixeden

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 95

Comments are closed.
  1. hi, can that loader use if i reload my page, so i don’t have to click some button to do that, thank you

    • no, i not find anything , once a try that loader is show after page finished load not point in time..

  2. Hi. How can I use when a page loads instead on click function?? Thanks any advice.

  3. Hello everyone again,

    I did find a semi-solution for the ‘Go back one page’. It’s obviously not what I really wanted, but it works and stops the freezing of the loading animation.

    To your tag add this ” onunload=” “, should look like this:

    That stops the freezing of the page animation. Soon I’ll launch my page. Where you can see what else I have used by the amazing tutorials in this forum. I hope you’ll enjoy it one I launch it, because it’s been a struggle. Hehe 🙂

    But enjoy.

    • Sorry I forgot code tags. So here:

      To your body tag add this ” onunload=” “, should look like this:

      <body onunload=''>

  4. Is there any way to allow this script to load multiple ID areas on one page, for example, I want an about, services and contact are, i’ve got 3 divs with different ID’s with 3 menu items pointing to said href ID’s but it only ever loads to the next one in line? Can anyone help at all? Cheers!

  5. How to make this auto loading when my page first load and then close when all the request from the server are loaded?

  6. Hi there,

    I try to use Windscreen wiper effect but the only thing that works is the preloader gif. between the 2 pages. Have you any idea why I can’t see the effect?

    Thanks for your time!

  7. Hi,

    Recently I found the Page Loading Effects and I try to use Windscreen Wiper in one of my creations but something seems to go wrong. I don’t see the actualy effect like the turning the leaves of a book. I see only the preloader gif.

    Have you any ideas why this happening?

    Thanks for your time!

  8. Great effect.

    Is there a way to initially start out with the loader present on a page and then reveal the page by hiding the loader?

    Thanks.

  9. Great, usefull resource but i have a doubt… what about the compatibility with IE and others browsers?

  10. hello… need help on a different article but the comment has been closed on that article… Triple Panel Image instead of a 3 panel slide i want it to have a 4 panel slide without the 3d effects… can anyone help

  11. Hi, i was wondering if there’s actually a way to make this efect to more pages than 2, i really wanted to learn but its very difucult because im kinda new with js,

  12. Hi, i want to know how to put an image in the background when the loader appear (behind the loader)?? Many things tried, but nothing work.

    Thanks!!

  13. dear codrops can i learn coding of this page loading…….mean all files java,css,html etc …for learning these menus!!!!!!love this

  14. Hello Mary Lou, very beautiful effects. May I ask politely if these effects apply to a dynamic site like joomla version 3>? If this is possible there is documentation that explains how to do?
    Thank you.

  15. hi. i would like to use this effect when i open each page in a wordpress blog likea preloader effect. how can i do this.
    thank a lot