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%);
}