A pure CSS Progress Circle Animation Library. Only CSS

Download (17kb minified)

Star Fork

Demo

10
20
25
30
40
50
60
70
75
80
90
100

Usage

First include the library CSS:

<link rel="stylesheet" href="progress-circle.css">

Then in your HTML include the code:

<div class="progress-circle progress-75"><span>75</span></div>

Result:

75

Custom


// Sass variables

$color-progress-circle:#ebebeb ;
$color-progress-indicator:#66b8ff;
$color-progress-circle-number:#fff;
$color-progress-number:#8b8b8b;

Features

  • Only CSS. No JavaScript!
  • Small file size. Only 17KB minified!
  • Easy to use. No config required.
  • Works in all modern browsers.

Browser support

  • Chrome 26+
  • Edge
  • Firefox 10+
  • Opera 11.6+
  • Safari 6+
Progress Circle Animation - Powered by Thiago Canudo - Apoio Loja Caneca do Dev.