comment 0

Buffer’s loading animation in SVG and CSS

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

Filed under: CSS

Leave a Reply