Pure CSS Loading Spinner

Posted on Fri, December 20, 2013 in Web Design, by Kevin Carpenter

How often do you see the same loading graphic, using the same animated .gif file? I know I see it multiple times every day, but why use such a common poorly rendered graphic when we could create one more visually pleasing just as easily in pure css?

If you do not know which loading graphic I am specifically referring to, let me refresh your memory:

CSS Loading Spinner GRAYBOX Web Development

Now we could directly recreate this graphic (I have included the code at the bottom of the post) but for this brief example let's rework this graphic a bit.


CSS: $size: 0.5em; $color: #c22;

.loading{ box-sizing: border-box; position: relative; display: inline-block; padding: $size; vertical-align: middle; text-align: center; background-color: transparent; border: 5px solid transparent; border-top-color: $color; border-bottom-color: $color; border-radius: 50%; }

.outer{ animation: spin 1s infinite; }

.inner{ animation: spin 1s infinite; }

@keyframes spin{ 0%: { transform: rotateZ(0deg); } 100%: { transform: rotateZ(360deg); } }

/* styling */ html { width: 100%; height: 100%; background: radial-gradient(circle, #fff 0%, #aaa 100%) no-repeat; overflow-x: hidden; overflow-y: hidden; } body { text-align: center; display: table; width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; } #wrap { box-sizing: border-box; display: table-cell; vertical-align: middle; }

See the Pen Simple CSS Loading Spinner by Kevin Carpenter (@graybox-kevin) on CodePen


So there we have it, a simple easily customizable smooth, and lightweight loading spinner built using only TWO elements. I don't think I need to do much explaining of the basic HTML and CSS that's being used other than you should note that this doesn't use vanilla CSS but rather SCSS so that we can use variables.

Also, as promised here is the basic redone spinner if you wish to go with the older look:

See the Pen mEHoB by Kevin Carpenter (@graybox-kevin) on CodePen

Please Note - Since we are using CSS3 animations to display these they will not be animated in IE9 and below. However, they will still appear but static instead of animated which isn't a huge issue. Users on older browsers will just be missing out on yet another feature, so as long as nothing related to functionality breaks this isn't really a problem.

Tell Us About Your Project

Invalid phone number