Freebie: Flat Style Squared Preloaders (GIF, AEP, PNG)

Today we are really happy to share a set of creative activity indicators by PixelBuddha with you! You may have seen the first set of the Flat Preloaders that consisted of round style colorful activity indicators. The set was so well received and today we’re very glad to offer you an exclusive freebie on Codrops — the second part of the preloaders collection, and this time in square style. About the Preloaders The preloaders were made using trendy flat colors, so they will fit perfectly into any modern interface. Every preloader comes in three sizes, 32×32, 64×64, 128×128. You will also find the Adobe After Effects (CS6, CC versions support) file, where you can modify, scale and change the colors of the preloaders. Preview Have a look at the complete set of these creative squared activity indicators: Download the set for free You can download the ZIP file here: Download the Flat Preloaders ZIP file (3 MB) Please take a look at the license terms included in the ZIP file. On PixelBuddha.net you can also download the first part of the preloaders collection and find many other wonderful freebies with new resources being added weekly. If you’d like to contribute and publish your freebie on Codrops just drop us a...

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