CSS Loading Icon Examples

  • follow us in feedly
Published January 10, 2014 by Brad Knutson
CSS Loading Icons

If you’ve spent any amount of time reading my blog, you’re well aware that I’m a CSS junkie. If there is a way to do it in pure CSS, I’m all for it.

I’ve covered countless topics that involved replacing jQuery and Javascript with pure CSS, and here is another fun one. Loading icons for large webpages used to require either a .gif or some fancy Javascript work. Of course, we can replace these animations with CSS, so let’s dive in!

Pulsing Loading Icon

The HTML

The CSS

Horizontal Fountain Loading Icon

The HTML

The CSS

Windows 8 Loading Icon

The HTML

The CSS

Floating Circles Loading Icon

The HTML

The CSS

Ok, so these aren’t the most complicated examples in the world, but if you can dream it up you can recreate it with CSS, it just takes a little experimenting.

What do you think? Would you be inclined to create these loading icons with pure CSS, or opt for the much simpler .gif option?

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

6 thoughts on “CSS Loading Icon Examples

  1. Shemul

    Using gif is easy and comfortable for less known person like me. But using CSS is more stylish and Techie. I always say, why use image, if you can use CSS.

    Reply
    1. Matthew

      Why don’t you add onto the blog post or do an example in a new blog post? I think many people would find that very useful.

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">