Jonatan Littke

This is the blog of Jonatan Littke, a Swedish entrepreneur, designer and developer.

.

← Home

Animated progress circle in CSS

0 %

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>

Download the LESS code.

Remove the .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 and .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.