CSS Spinners Made Easy

Here's a simple way to create your own CSS spinners (i.e. loaders) without any images or JavaScript. It's lightweight, easy to use, and completely customizable.

The benefits of CSS-only loaders are:

  • Good browser support
  • No additional HTTP requests
  • No additional resources (images, JavaScript, etc.)
  • Smooth animations
  • Can be applied with a single CSS class
  • Easy to customize (size, color, width, speed, etc.)

Check out my pen to see how it works and grab the source.

Author avatar

About the author

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.