MustafaTofur

A basic circular progress bar made using with HTML, CSS and JavaScript.

You can use this progress bar, which is very simple to make, in your projects according to your needs, the source codes are as follows:

HTML

<div class="container">
  <div class="box">
    <div class="chart" data-percent="90">90%</div>
    <h2>HTML</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="72">72%</div>
    <h2>CSS</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="81">81%</div>
    <h2>JAVASCRIPT</h2>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  height: 100vh;
  background: #0d0c2d;
}

.container {
  display: grid;
  grid-template-columns: repeat(1, 160px);
  grid-gap: 80px;
  background: #0d0c2d;
  box-shadow: -5px -5px 8px rgba(94, 104, 121, 0.288),
    4px 4px 6px rgba(94, 104, 121, 0.288);
  padding: 60px;
  margin: auto 0;
}

@media (min-width: 420px) and (max-width: 659px) {
  .container {
    grid-template-columns: repeat(2, 160px);
  }
}

@media (min-width: 660px) and (max-width: 899px) {
  .container {
    grid-template-columns: repeat(3, 160px);
  }
}

@media (min-width: 900px) {
  .container {
    grid-template-columns: repeat(3, 160px);
  }
}

.container .box {
  width: 100%;
}

.container .box h2 {
  display: block;
  text-align: center;
  color: #fff;
}

.container .box .chart {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 40px;
  line-height: 160px;
  height: 160px;
  color: #fff;
}

.container .box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  width: 100%;
}

JavaScript

This application has been used 3.6.0/Jquery and 2.1.6/jquery.easypiechart.js
$(function () {
  $(".chart").easyPieChart({
    size: 160,
    barColor: "#36e617",
    scaleLength: 0,
    lineWidth: 15,
    trackColor: "#525151",
    lineCap: "circle",
    animate: 2000
  });
});

I used this application 3.6.0/Jquery library and 2.1.6/jquery.easypiechart.js.

Don’t forget to include while you creating application 3.6.0 jquery library and 2.1.6 jquery.easypiechart.js