Animated progress circle in CSS
It’s for you! Use it as you wish. It’s written entirely in CSS (in LESS, actually) and needs a few divs and no images:
<div class="progress-circle-container"> <div class="progress-circle-outer animate"> </div> <div class="progress-circle-inner"> <span class="number">0</span> <span class="unit">%</span> </div> </div>
.animate class on
#progress-circle to stop the animation, presumably when the loading is complete.
I’ve bundled in a few mixins that originally came from Bootstrap, you can remove those if you already include the Bootstrap less files. Note though that
.animation-state are not in Bootstrap, so keep those.
I’m using Proxima Nova as a font for this site so that’s the font of the progress circle, too. If you want that particular font, you can load it through Typekit.
This spinner was inspired by Virgil Pana’s Progress bar on Dribbble.