CSS Loading Icons

Posted in Experiments.

Played around at lunchtime with some different styles for CSS-based animated loading icons. For each of these I used one HTML element and added some CSS keyframe animation to get them moving.

This has only been tested in Google Chrome. It should work to a certain extent in Firefox, and probably not at all in Internet Explorer.

Check out the Codepen example after the break, or check it out on Codepen:

Edit 1: Codepen crashed just as I posted this, so be patient… it’ll come back!
Edit 2: Codepen is back up. Enjoy.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>