One of the subtle yet original UI elements you can add on your website or app are custom loading indicators or animations. In this post at CSSanimation.rocks, the author de-constructs the loading animation the webapp Buffer uses when users are signing in. Buffer’s approach is straightforward where it utilizes a simple GIF image that got swapped out with a static PNG logo when the loading completes. This tutorial takes it up a notch by reproducing the loading animation using CSS and SVG. The end result is a scalable, retina-ready loading animation at the fraction of the GIF file. This is a great tutorial if you are new to SVGs and CSS animations. Click the buttons below to learn more or jump straight to the demo.

Learn More View Demo