Customizable Easy Pie Chart round progress bar plugin

This tutorial is for someone who is searching Google for simple circular progress bar CSS code. Or maybe you’re developing your own round progress bar from scratch for a library or an extension of some sorts. Then you can just copy this code as a starting point.

Step-1:

First You need to use jQuery and easy pie chart CDN OR Download jQuery and easy pie chart New version

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js" charset="utf-8"></script>

Step-2: HTML Code:

<div class="container">
  <div class="card">
    <h3 class="text">HTML: 90%</h3>
    <h3 class="text">CSS: 72%</h3>
    <h3 class="text">JS: 81%</h3>
  </div>
  <div class="Box">
    <div class="chart html" data-percent="90" ></div>
    <div class="chart css" data-percent="72" ></div>
    <div class="chart js" data-percent="81" ></div>
  </div>
</div>

Step-3 CSS Code:

body{
  background-color: #f5f5f7;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  line-height: 1.5px;
  font-family: sans-serif;
}
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 500px;
  height: 400px;
  background-color: #fff;
}
.card{
  text-align: center;
}
.box{
  position: relative;
}
.chart{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

JavaScript Code:

$(function() {
  $('.html').easyPieChart({
    size: 200,
    barColor: "#36e617",
    scaleLength: 0,
    lineWidth: 20,
    trackColor: "#525151",
    lineCap: "circle",
    animate: 2000,
  });
  
  $('.css').easyPieChart({
    size: 240,
    barColor: "#A52A2A",
    scaleLength: 0,
    lineWidth: 20,
    trackColor: "#525151",
    lineCap: "circle",
    animate: 2000,
  });
  $('.js').easyPieChart({
    size: 280,
    barColor: "#FFA500",
    scaleLength: 0,
    lineWidth: 20,
    trackColor: "#525151",
    lineCap: "circle",
    animate: 2000,
  });
});
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply