Customizable Easy Pie Chart Round Progress Bar Plugin

RH Suman
June 20, 2022

37

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.
Customizable Easy Pie Chart Round Progress Bar Plugin

Step-1:

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

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

Preview

Subscribe

Get Updates

Subscribe our newsletter to get the last update into your inbox!

Please insert email address.

Recommended Posts