Facebook loadercreated with CSS3


Below, you'll find the loading animation from Facebook created using pure CSS3. It uses keyframes for the animation. Make sure to read the article or dive into the source code to understand how it works. Take note this page uses Prefix free to use unprefixed CSS3 properties.

The frames from the loading GIF have been extracted using Gif Explode. The animation of the GIF is slightly faster though, since I couldn't find out the proper framerate.

Reference image (GIF)

Facebook CSS3 loader