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.

PageLoadingEffects

View demo Download source

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

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start leanirng CSS now.

Feedback 94

Comments are closed.
  1. 15

    You continue to out-do yourselves guys, thanks for another amazing preview – looking forward to implementing this.

  2. 16

    Hey, theres any way to load diferents pages? cause if i add “#page-3” always load the “#page-2”,

    thanks !

    • 18

      u must change you javascript codes,
      change the
      currentPage = currentPage ? 0 : 1;
      to

      switch (currentPage){
      case 0:
      currentPage = 1;
      break;
      case 1:
      currentPage = 2;
      break;
      case 3:
      currentPage = 4;
      break;
      case 4:
      currentPage = 1;
      break;
      }

    • 20

      zamia is partially correct. I’m not very good with Javascript, so this might be inelegant. But hey, it’s better than nothing.

      Change where it says
      triggerLoading = [].slice.call( pageWrap.querySelectorAll( ‘a.pageload-link’ ) ),
      to
      a.pageload-link-1 (or whichever positive integer you want really)

      Now, go back to the link you want it to refer to and change that to the same thing.

      Next, change this line of code
      currentPage = currentPage ? 0 : 1;
      to refer to whichever page you want e.g. if it’s the third page, change it to 0 : 2.

      Basically, just copy and paste that entire javascript function for every different page and change them to pageload-link-(n+1) and 0 : (n+1).

      Hopefully that made some sense. If it didn’t I can try to explain it a different way.

    • 23

      Hi Manoela
      Your works are wonderful,I want ask a question about your last job, “PAGE LOADING EFFECTS”
      How can I create more buttons to go more page in one page ?

      Please Answer

  3. 25

    WOw .. Nice one i might think i will re engineer- this one :) hehehe ..
    Tnx this would be a great help!!

Comments are closed.