CSS3 Loading Spinner
Published by Chris Coyier
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
- 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
- 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).