Page Loading Effects

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