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

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.