<div class="container-fluid">
	<div class="row">
		<div class="col-md-3 text-center mb-3">
			<div class="chart margin-70px-bottom" data-line-width="6" data-percent="73" data-track-color="#232323" data-start-color="#9D50BB" data-end-color="#6E48AA"><span class="percent text-white"></span></div>
		</div>
		<div class="col-md-3 text-center mb-3">
			<div class="chart margin-70px-bottom" data-line-width="8" data-percent="68" data-track-color="#232323" data-start-color="#4776E6" data-end-color="#8E54E9"><span class="percent text-white"></span></div>
		</div>
		<div class="col-md-3 text-center mb-5">
			<div class="chart margin-70px-bottom" data-line-width="12" data-percent="82" data-track-color="#232323" data-start-color="#FF512F" data-end-color="#DD2476"><span class="percent text-white"></span></div>
		</div>
		<div class="col-md-3 text-center mb-3">
			<div class="chart margin-70px-bottom" data-line-width="15" data-percent="66" data-start-color="#AA076B" data-end-color="#61045F"><span class="percent text-white"></span></div>
		</div>
		<div class="col-md-3 text-center">
			<div class="chart" data-line-width="6" data-percent="91" data-track-color="#333" data-bar-color="#fff"><span class="percent" style="color: #9D50BB"></span></div>
		</div>
		<div class="col-md-3 text-center">
			<div class="chart" data-line-width="8" data-percent="77" data-track-color="#333" data-bar-color="#aaa"><span class="percent" style="color: #4776E6"></span></div>
		</div>
		<div class="col-md-3 text-center">
			<div class="chart" data-line-width="12" data-percent="68" data-track-color="#333" data-bar-color="#999"><span class="percent" style="color: #FF512F"></span></div>
		</div>
		<div class="col-md-3 text-center">
			<div class="chart" data-line-width="15" data-percent="72" data-track-color="#333" data-bar-color="#666"><span class="percent" style="color: #AA076B"></span></div>
		</div>
	</div>
</div>
body {
	background: #000;
	padding: 50px;
	display: flex;
	align-items: center;
	min-height: 100vh;
}
.chart {
	position: relative;
	width: auto;
	display: inline-block;
}
.percent {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 22px;
	transform: translate(-50%, -50%);
}
$(document).ready(function () {
	if ($(".chart").length) {
		var color1, color2;
		$(".chart").easyPieChart({
			trackColor: "#232323",
			scaleColor: "",
			easing: "easeOutBounce",
			lineCap: "round",
			lineWidth: 10,
			size: 150,
			barColor: function () {
				color1 =
					$(this.el).attr("data-start-color") ||
					$(this.el).attr("data-bar-color") ||
					"#000";
				color2 =
					$(this.el).attr("data-end-color") ||
					$(this.el).attr("data-bar-color") ||
					"#000";
				var ctx = this.renderer.getCtx();
				var canvas = this.renderer.getCanvas();
				var gradient = ctx.createLinearGradient(0, canvas.width, canvas.width, 0);
				gradient.addColorStop(0, color1);
				gradient.addColorStop(1, color2);
				return gradient;
			},
			animate: {
				duration: 2000,
				enabled: true
			},
			onStep: function (from, to, percent) {
				$(this.el)
					.find(".percent")
					.text(Math.round(percent) + "%");
			}
		});
	}
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js