Circular Progress Bar using jQuery

Hello readers welcome back to another blog post on our blog each day we release creative coding tutorials and each day is always something new, today were are going to look at a Circular Progress Bar using HTML CSS and JavaScript, I've release a tutorial on Progress Bar earlier and today we will be looking at a Circular Progress Bar.

Now in this program Circular Progress Bar we have used jQuery to make this program function properly. To make this program you would have to copy the jQuery link I have used in this program but before we dive deeper into that let me explain what this program does.

A circular progress bar is a progress bar that rotates in a Circle Shape Form, this progress bar then have an inner and outer area, all are in circle form using a border radius of 50px. The outer area of the circular progress bar is the colored area and the part that rotates indicating the user percentage value. Now with this I hope you have known what this program does.

Video Tutorial of Circular Progress Bar using jQuery

In the demo of this video you have seen the demo of this program and the concept behind creating this. In the demo preview of this program you have seen that i have created this using JQuery you can use css only but to be able to get data-percent of the attribute you would need JQuery like i have done here.

Now in the demo preview you have also seen that i have three "3" Data's given which are "HTML, CSS & JavaScript you can set your Data name to be anything but i have chosen these three languages.

All the UI of this Circular porgress bar is made by HTML and CSS and to change the percentage i have added some JQuery codes. As you have seen in the video tutorial how I have used clean and easy codes to created this beautiful circular progress bar.

I hope now you can easily create this program, circular progress bar, if you are feeling difficult to create, you can copy or download all source code files of this circular progress bar form below:

Circular Progress Bar [Source Code]

To get the following source code of our Circular Progress Bar, you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
  <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>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Pure CSS Circular Progress Bar</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container" id="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>
  <script type="text/javascript">
    $(function(){
      $('.chart').easyPieChart({
        size: 160,
        barColor: "#4158d0",
        scaleLength: 0,
        lineWidth: 15,
        trackColor: "#fff",
        // lineCap: "circle", // only use this if you want outer area to be square inside
        animate: 2000, // time it takes for the progress bar to move around
      });
    });
  </script>
</body>
</html>

CSS CODE:

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  justify-content: center;
  height: 100vh;
  background-color: #50E3C2;
background-image:
radial-gradient(at 47% 33%, hsl(212.73, 21%, 90%) 0, transparent 59%),
radial-gradient(at 82% 65%, hsl(198.00, 100%, 50%) 0, transparent 55%);
}
.container{
  display: grid;
  grid-template-columns: repeat(1, 160px);
  grid-gap: 80px;
  padding: 60px;
  margin: auto 0;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.5);
  border-right: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 25px 45px rgba(0,0,0,0.1);
}
/* Responsive Design */
@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: #4158d0;
  margin-top: 10px;
  font-weight: 600;
}
.container .box .chart{
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 40px;
  line-height: 160px;
  height: 160px;
  color: #4158d0;
}
.container .box canvas{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  width: 100%;
}
.container .box canvas{
  transition: .2s ease;
}
.container .box canvas:hover{
  transform: scale(1.1);
}
.container .box .chart{
  overflow: hidden;
}
.container .box .chart{
  transition: .2s ease;
  cursor: pointer;
}
.container .box .chart:hover{
  border-radius: 50%;
}

Circular Progress Bar using jQuery

You Might Like This:

Circular Progress Bar [Source Code]

Creative Tutorials

1 Comments

Post a Comment

Contact Form