CSS3 Loading Spinner

Avatar of Chris Coyier
Chris Coyier on (Updated on )

I made a little CSS3 rotate-y loading graphic thing just for kicks. Here’s an animated GIF of the glory as it appears in WebKit.

Theories at work:

  • Two circles on top of each other. One created by a pseudo element.
  • Pseudo circle sits underneath with negative z-index.
  • Pseudo circle has inset box-shadow.
  • Regular circle has regular box-shadow.
  • “Loading…” is a strong tag with hidden overflow.
  • Width of strong tag is animated keyframe, doing the reveal, infinitely.
  • Text is vertically centered by having line-height equal to height.
  • Spinner is a triangle placed above the pseudo circle but below the regular circle with z-index.
  • Triangle is rotated from it’s tip by changing it’s -webkit-transform-origin
  • Triangle is keyframe animated to go from 0 to 360deg infinitely.

Ideally, the triangle would be a pseudo element as well, but unfortunately it’s a <span>. Pseudo elements cannot be animated (yet). Firefox 4 can transition them, but Firefox 4 doesn’t do keyframe animations (yet).

View Demo