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.

From our sponsor: Sign up for Mailchimp today.

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:

Mary Lou

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.

http://www.codrops.com

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

Feedback 95

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

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

    thanks !

    • 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; }

    • 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.

    • 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. WOw .. Nice one i might think i will re engineer- this one πŸ™‚ hehehe ..
    Tnx this would be a great help!!

  4. Amazing! very nice, however i have a question, how can i modify the svg preloader with one of my own (in .gif format) ?

    Cheers!

    • Awesome !
      @Raphael You can edit it in the components.css with the after & before.

    • @Danini1112 Hi again! thanks for the tip, but I’m sorry I’m kinda new to this (I’m a multimedia design student) do you mind sending me a snippet of the code i would have to use in the after & before please?? you would save my future career lol it’s for my portfolio

    • You can change this by this (in component.css):

      .pageload-overlay::after,
      .pageload-overlay::before {
      content: ”;
      position: fixed;
      width: 64px; <<put your gif's width here
      height: 64px; <<put your gif's height here
      top: 50%;
      left: 50%;
      margin: -10px 0 0 -10px;
      border-radius: 50%;
      visibility: hidden;
      opacity: 0;
      z-index: 1000;
      -webkit-transition: opacity 0.15s, visibility 0s 0.15s;
      transition: opacity 0.15s, visibility 0s 0.15s;
      }

      .pageload-overlay::after {
      background-image:url(../img/preloader_2.gif); <<enter your gif direcciΓ³n here
      }

      .pageload-overlay::before {

      }

  5. Amazing demonstrations! Thank you for share. Codrops is the best blog about front-end development. Great work.

  6. Please no! Don’t go back to the “Flash” days with all those crappy loaders! Ugly, distracting, not user friendly, …

    • What this person said….
      I was immediately annoyed by both of the example websites. A loader for a website, it’s to the boundary of offending. Why do would you make me look at a silly loader to view your webpage? Loading screens have been the most necessary evil ever since computers came into existence.

  7. Can I use this for a wordpress intro ??? I have to wordpres directory and before you have to choose the directory in a simpre html page.
    I’d like to add a transition like this… .

  8. Nice job, excellent work.
    just have one question, if I want to go to an external website?, That I have to change?

    Thanks a lot.

    Sorry by my English!.

  9. hi mary…
    first of all,grat job…
    i have a question for you..can you help me??i want put your svg like loading page..can you send me a snippet??
    thank you for you availability..

  10. OMG!! Mary LOU the possibilities of your CREATIVITY is INFINITE!! JUST WOW!! You are my inspiration TRUELY πŸ˜€ πŸ˜€

  11. Thanks for this awesome tutorial Mary.

    How would I go about returning to a section of the original page? When I add a #target to the go back link, it always loads the original page on the top of the screen. Is there a quick way to do this?

    Thanks in advance!

  12. Great info! Thanks Mary. I just hope to be able to apply them. Best regards.

  13. Hey MARY LOU,
    Its awesome. Definitely i am going to use it on my website. Thanks for sharing such a nice post.

  14. Pretty helpful πŸ™‚ Trying to apply this code into my stylesheet. Thank u

  15. OMG! It’s amazing. Thanks for sharing and for the source code too. Let’s implement it on my client site now!

  16. I think this is cool but find it interesting how many people have issues with it. I think like any design element, it has to be applied properly. Too much of anything can kill a design. But I welcome this into my design toolbox. Thanks for sharing!

  17. I am a visual learner. Does anyone have codrops tutorial explained in youtube

  18. This looks great! I have a couple questions about how to create my own multi-step animation like the “Lazy Stretch” demo. Do I begin by creating an SVG in Illustrator and use its shape code? I am wondering where the data inside path d and the data-opening and data-closing attributes comes from. I thought those might be the coordinates of an SVG path, but that don’t resemble any that Illustrator generates, unless I’m doing something wrong. Thanks!

  19. Hi,
    I’m Designing a Loader:
    http://codepen.io/MHM5000/full
    How can I move a light throw it, instead of turn it on and off?
    Like the old Adobe/Macromedia Flash and it’s Masks??
    and more importantly, will it be something with simple css, js or it requires Canvas?

  20. Why I can’t use more than 2 page id’s on single html? Even when I link them it swtiches between those 2 first. Thanks for reply.

  21. how to do this effect on page load instead of click event, please tell , it is not happening

    • Morten has showed a good example few comments below.
      In the function replace
      // after some time hide loader setTimeout( function() { loader.hide(); classie.removeClass( pages[ currentPage ], 'show' ); // update.. currentPage = currentPage ? 0 : 1; classie.addClass( pages[ currentPage ], 'show' ); }, 2000 );

      With this

      // after some time hide loader setTimeout( function() { loader.hide(); document.getElementByClass('container').style.display = 'none' }, 2000 ); setTimeout( function() { document.location.href = trigger.getAttribute('href') }, 2000);

  22. Hello,

    Very awesome animated svg effect. I have been playing around a bit with it. I’m no jQuery mastermind, but I tried to link the animation to another page. On the clicked page it works just fine, but then on the page it goes to it doesn’t animate when opening. It like it lags the animation on the page it goes to. It shows some, but then just shows all instead of animating into the page.

    I have made a demo here where you can see what I’m talking about.

    my demo page

    Does anyone have an idea of how to fix it? I tried out some of Valerios code for the script itself, but still doesn’t function that well :S

    Any help would be much appreciated.

    • Ok seems like I got it to function now. But I don’t understand why the ms was the cause of it. I think it has something to do with the loading time of the page, but I’m not really sure.

      But my script ended up looking like this:

      (function() {
      var pageWrap = document.getElementById( 'pagewrap' ),
      pages = [].slice.call( pageWrap.querySelectorAll( 'div.container' ) ),
      currentPage = 0,
      triggerLoading = [].slice.call( pageWrap.querySelectorAll( 'a.pageload-link' ) ),
      loader = new SVGLoader( document.getElementById( 'loader' ), { speedIn : 100 } );

      function init() {
      triggerLoading.forEach( function( trigger ) {
      trigger.addEventListener( 'click', function( ev ) {
      ev.preventDefault();
      loader.show();
      // after some time hide loader
      setTimeout( function() {
      loader.hide();
      document.getElementByClass('container').style.display = 'none'
      }, 2000 );
      setTimeout( function() {
      document.location.href = trigger.getAttribute('href')
      }, 2500);
      } );
      } );
      }

      init();
      })();

      </code

    • Morten, cheers for sharing. I found your tweak very helpfull.

      Obviosly, awesome loading effects!!

  23. Hey guys,
    i try use this svg loader in my site but i don’t understand how use it!!!
    I want use a loader when the user do click in a link and the browser load the new page, i don’t want use this for load other divs in the same page.

    Please, can anyone help me?

  24. Hello again,

    I have noticed that when I in the browser use ‘go back one page’ then the loading stops on the page it going back to. Like it freezes.

    You can have a look at what I’m talking about here: my current demo

    Click any of the works and then click the browser button “go back one page”. Do you know what the problem for this could be?

    • Does anyone have a clue to why it freezes/locks itself once you’re in a project and click the browsers “Go back one page” button?

      Seems very odd to me, but not sure how to fix it.