Examples - Circle Progress
Description: Circle Progress examples. Circle Progress is responsive, accessible, animated, stylable with CSS circular progress bar available as plain (vanilla) JavaScript and jQuery plugin.

# Circle Progress examples

Each example is accompanied by JavaScript and CSS code. You can switch between plain JS and jQuery snippets.

Read the documentation on GitHub

### JS / jQuery

    new CircleProgress('.progress', {max: 100, value: 60, textFormat: 'percent'});

    $('.progress').circleProgress({max: 100, value: 60, textFormat: 'percent'});

### CSS

    .circle-progress-value {
    	stroke-width: 6px;
    	stroke: hsl(39, 100%, 50%);
    }
    .circle-progress-circle {
    	stroke-width: 6px;
    	stroke: hsl(39, 100%, 85%);
    }
    .circle-progress-text {
    	fill: hsl(39, 100%, 50%);
    }

### JS / jQuery

    new CircleProgress('.progress', {max: 100, value: 60});

    $('.progress').circleProgress({max: 100, value: 60});

### CSS

    .circle-progress-value {
    	stroke-width: 6px;
    	stroke: hsl(320, 80%, 60%);
    	stroke-dasharray: 4 1;
    }
    .circle-progress-circle {
    	stroke-width: 6px;
    	stroke: #eee;
    }
    .circle-progress-text {
    	font-weight: bold;
    	fill: hsl(180, 80%, 47%);
    }

### JS / jQuery

    new CircleProgress('.progress', {max: 100, value: 60});

    $('.progress').circleProgress({max: 100, value: 60});

### CSS

    .circle-progress-value {
    	stroke-width: 6px;
    	stroke: hsl(280, 90%, 50%);
    	stroke-linecap: round;
    }
    .circle-progress-circle {
    	stroke-width: 2px;
    }

### JS / jQuery

    new CircleProgress('.progress', {max: 100, value: 60, textFormat: 'vertical'});

    $('.progress').circleProgress({max: 100, value: 60, textFormat: 'vertical'});

### CSS

    .circle-progress-value {
    	stroke-width: 50px;
    	stroke: hsl(160, 63%, 55%);
    }
    .circle-progress-circle {
    	stroke-width: 50px;
    	stroke: #999;
    }
    .circle-progress-text {
    	fill: white;
    }

### JS / jQuery

    new CircleProgress('.progress', {max: 100, value: 60, textFormat: 'vertical'});

    $('.progress').circleProgress({max: 100, value: 60, textFormat: 'vertical'});

### CSS

    .circle-progress-value {
    	stroke-width: 6px;
    	stroke: white;
    	stroke-linecap: round;
    }
    .circle-progress-circle {
    	stroke-width: 8px;
    	stroke: #888;
    }
    .circle-progress-text {
    	fill: #888;
    }

### JS / jQuery

    new CircleProgress('.progress', {max: 100, value: 60, textFormat: 'vertical'});

    $('.progress').circleProgress({max: 100, value: 60, textFormat: 'vertical'});

### CSS

    .circle-progress-value {
    	stroke-width: 50px;
    	stroke: hsl(100, 90%, 70%);
    }
    .circle-progress-circle {
    	stroke-width: 40px;
    	stroke: hsl(100, 15%, 60%);
    	fill: hsl(100, 15%, 60%);
    }
    .circle-progress-text {
    	fill: white;
    	font-weight: bold;
    }

### JS / jQuery

    new CircleProgress('.progress', {max: 12, value: 9, textFormat: function(value, max) {return value + ' dots';}});

    $('.progress').circleProgress({max: 12, value: 9, textFormat: function(value, max) {return value + ' dots';}});

### CSS

    .circle-progress-value {
    	stroke-width: 11px;
    	stroke: aqua;
    	stroke-dasharray: 0 23.3;
    	stroke-linecap: round;
    }
    .progress[aria-valuenow="0"] .circle-progress-value {
    	display: none;
    }
    .circle-progress-circle {
    	stroke: transparent;
    }
    .circle-progress-text {
    	font-family: "Gotham rounded";
    	font-size: 13px;
    	fill: fuchsia;
    }

### JS / jQuery

    new CircleProgress('.progress', {max: 100, value: 40, textFormat: 'valueOnCircle'});

    $('.progress').circleProgress({max: 100, value: 40, textFormat: 'valueOnCircle'});

### CSS

### JS / jQuery

    new CircleProgress('.progress', {max: 100, value: 40, textFormat: 'percent'});

    $('.progress').circleProgress({max: 100, value: 40, textFormat: 'percent'});

### CSS

    .circle-progress-value {
    	stroke-width: 12px;
    	stroke: hsl(210, 100%, 45%);
    }
    .circle-progress-circle {
    	stroke: white;
    	stroke-width: 22px;
    	fill: #666;
    }
    .circle-progress-text {
    	font-family: "Georgia";
    	font-size: 13px;
    	fill: white;
    }

### JS / jQuery

    new CircleProgress('.progress', {max: 100, value: 80, textFormat: 'percent'});

    $('.progress').circleProgress({max: 100, value: 80, textFormat: 'percent'});

### CSS

    .circle-progress-value {
    	stroke-width: 2px;
    	stroke: aquamarine;
    }
    .circle-progress-circle {
    	stroke: #ddd;
    	stroke-width: 2px;
    }
    .circle-progress-text {
    	font-family: "Georgia";
    	font-size: 13px;
    }

### JS / jQuery

    new CircleProgress('.progress', {max: 100, value: 60, textFormat: 'percent'});

    $('.progress').circleProgress({max: 100, value: 60, textFormat: 'percent'});

### CSS

    .circle-progress-value {
    	stroke-width: 6px;
    	stroke: hsl(100, 100%, 60%);
    	stroke-dasharray: 0.6 3;
    }
    .circle-progress-circle {
    	stroke-width: 6px;
    	stroke: #ddd;
    	stroke-dasharray: 0.6 3;
    	stroke-dashoffset: 1.6;
    }
    .circle-progress-text {
    	font-family: "Gotham Rounded Light";
    	fill: hsl(100, 81%, 55%);
    	font-size: 26px;
    }

### JS / jQuery

    new CircleProgress('.progress', {max: 100, value: 75, textFormat: 'percent', startAngle: -90});

    $('.progress').circleProgress({max: 100, value: 75, textFormat: 'percent', startAngle: -90});

### CSS

    .circle-progress-value {
    	stroke-width: 12px;
    	stroke: darkmagenta;
    }
    .circle-progress-circle {
    	stroke: white;
    	stroke-width: 11px;
    	fill: #666;
    }
    .circle-progress-text {
    	font-family: "Georgia";
    	font-size: 13px;
    	fill: white;
    }

### JS / jQuery

    new CircleProgress('.progress', {max: 4, value: 3, textFormat: 'vertical', clockwise: false, animation: 'none'});

    $('.progress').circleProgress({max: 4, value: 3, textFormat: 'vertical', clockwise: false, animation: 'none'});

### CSS

    .circle-progress-value {
    	stroke-width: 25px;
    	stroke: hsl(210, 100%, 45%);
    	stroke-dasharray: 58 1;
    }
    .circle-progress-circle {
    	stroke: hsl(210, 100%, 85%);
    	stroke-width: 25px;
    	fill: hsl(210, 100%, 85%);
    }
    .circle-progress-text {
    	font-family: "Gotham";
    	font-size: 16px;
    	fill: hsl(210, 100%, 45%);
    }