Circular Progress Bar – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Tue, 02 May 2023 12:39:44 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Create Circular Progress Bar in HTML CSS & JavaScript https://www.codingnepalweb.com/progress-bar-html-css-javascript/ https://www.codingnepalweb.com/progress-bar-html-css-javascript/#respond Wed, 15 Jun 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4174 Create Circular Progress Bar in HTML CSS & JavaScript

Hello friend, I hope you are doing and creating well. Today you are going to learn to create a Circular Progress Bar in HTML CSS & JavaScript only, I will not any SVG code. There are lots of Progress Bar I have created that are horizontally progressed. Today’s progress will be circular and it will also show the percentage that it has progressed.

Circular Progress Bar is the animation of a progressing bar in a circular motion and it is used to display information like skills in some field, knowledge, and as like this. You may have seen the circular progress bar on someone’s portfolio website, where they display the ability of something that they have in the percentage value.

Have a quick look at the given image of our project [Animated Circular Progress], on the webpage. As you have seen the bluish-purple color circle is not fully closed and inside it, the value of the circle or that shape has displayed. Actually when you refreshed the webpage that will start to progress from 0 and stops at 90%. Bottom of the circular progress bar there is the text “HTML & CSS”, For example, we can understand it, the knowledge of HTML & CSS is 90%

You can watch the real demo of this project [Animated Circular Progress], by watching the video tutorial that I have given below, and of course, you will also get the idea, of how HTM and CSS code work behind this circular progressing bar.

Create Circular Progress Bar | Skills Bar | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Circular Progress Bar, before getting into the source code file, I would like to briefly explain the video tutorial.

As you have seen in the video tutorial of our project [Animated Circular Progress Bar] when I refreshed the webpage the circle and the percentage value, started to progress from zero. As you have seen in the video, to create all the circular progressing bars I used only HTML and CSS, I did not use any SVG code, and to animate it I used some JavaScript code.

I believe, that now you can build this project [Circular Progress Bar], by using HTML CSS, and JavaScript. If you are feeling difficulty building it. I have provided all the source code files below.

You Might Like This:

Circular Progress [Source Code]

To get the following HTML CSS and JavaScript code for the Circular Progress, you need to create three files one is an HTML file and another is a CSS file and a JavaScript file. After creating these three 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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Circular Progress Bar </title>

        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css">
                                        
    </head>
    <body>
        <div class="container">
            <div class="circular-progress">
                <span class="progress-value">0%</span>
            </div>

            <span class="text">HTML & CSS</span>
        </div>

        <!-- JavaScript -->
        <script src="js/script.js"></script>
    </body>
</html>

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #7d2ae8;
}
.container{
    display: flex;
    width: 420px;
    padding: 50px 0;
    border-radius: 8px;
    background: #fff;
    row-gap: 30px;
    flex-direction: column;
    align-items: center;
}
.circular-progress{
    position: relative;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    background: conic-gradient(#7d2ae8 3.6deg, #ededed 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.circular-progress::before{
    content: "";
    position: absolute;
    height: 210px;
    width: 210px;
    border-radius: 50%;
    background-color: #fff;
}
.progress-value{
    position: relative;
    font-size: 40px;
    font-weight: 600;
    color: #7d2ae8;
}
.text{
    font-size: 30px;
    font-weight: 500;
    color: #606060;
}

 let circularProgress = document.querySelector(".circular-progress"),
    progressValue = document.querySelector(".progress-value");

let progressStartValue = 0,    
    progressEndValue = 90,    
    speed = 100;
    
let progress = setInterval(() => {
    progressStartValue++;

    progressValue.textContent = `${progressStartValue}%`
    circularProgress.style.background = `conic-gradient(#7d2ae8 ${progressStartValue * 3.6}deg, #ededed 0deg)`

    if(progressStartValue == progressEndValue){
        clearInterval(progress);
    }    
}, speed);

 

]]> https://www.codingnepalweb.com/progress-bar-html-css-javascript/feed/ 0 Responsive Circular Progress Bar using HTML CSS & jQuery https://www.codingnepalweb.com/circular-progress-bar-html-css-jquery/ https://www.codingnepalweb.com/circular-progress-bar-html-css-jquery/#comments Thu, 22 Oct 2020 08:22:00 +0000 https://codingnepalweb.com/2020/10/22/responsive-circular-progress-bar-using-html-css-jquery/ Responsive Circular Progress Bar using HTML CSS & jQueryHello readers, Today in this blog you’ll learn how to create a Responsive Circular Progress Bar using HTML CSS & jQuery. Earlier I have shared a blog on how to create Product Cards with Fly to Cart Effect and now it’s time to create Circular Progress Bar.

 
The circular progress bars present you with a beautiful and visually compelling way to showcase a single statistic. In this program [Circular Progress Bar], there are three bars on the webpage with different percent, and when you refresh the page, the circle graph fills to the percentage-based location. These bars are fully responsive to any device like a tablet, mobiles, etc.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Shopping Cards with Fly to Cart Effect].

Video Tutorial of Circular Progress Bar

 
In the video tutorial, you have seen the Responsive Circular Progress Bar and it’s done with the jQuery Circle Progress Bar plugin. You can also create these circular bars with HTML SVG but there you can do only limited things. If you want pure HTML CSS & JavaScript Circular Bar then you can read this blog about Circular Progress Bar with JavaScript.

If you like this responsive circular bar and want to get source codes then you can easily get it from the below boxes or can download source files from the download link. You can use these bars to show skills, projects, and many more.

You might like this:

Responsive Circular Progress Bar [Source Codes]

To create this program (Circular Progress Bar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Circular Progress Bar | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
  </head>
  <body>
    <div class="wrapper">
      <div class="card">
        <div class="circle">
          <div class="bar"></div>
          <div class="box"><span></span></div>
        </div>
        <div class="text">HTML & CSS</div>
      </div>
      <div class="card js">
        <div class="circle">
          <div class="bar"></div>
          <div class="box"><span></span></div>
        </div>
        <div class="text">JavaScript</div>
      </div>
      <div class="card react">
        <div class="circle">
          <div class="bar"></div>
          <div class="box"><span></span></div>
        </div>
        <div class="text">React JS</div>
      </div>
    </div>

    <script>
      let options = {
        startAngle: -1.55,
        size: 150,
        value: 0.85,
        fill: {gradient: ['#a445b2', '#fa4299']}
      }
      $(".circle .bar").circleProgress(options).on('circle-animation-progress',
      function(event, progress, stepValue){
        $(this).parent().find("span").text(String(stepValue.toFixed(2).substr(2)) + "%");
      });
      $(".js .bar").circleProgress({
        value: 0.70
      });
      $(".react .bar").circleProgress({
        value: 0.60
      });
    </script>

  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: -webkit-linear-gradient(left, #a445b2, #fa4299);
}
.wrapper{
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.wrapper .card{
  background: #fff;
  width: calc(33% - 20px);
  height: 300px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper .card .circle{
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  cursor: default;
}
.card .circle .box,
.card .circle .box span{
  position: absolute;
  top: 50%;
  left: 50%;
}
.card .circle .box{
  height: 100%;
  width: 100%;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  transition: all 0.2s;
}
.card .circle:hover .box{
  transform: translate(-50%, -50%) scale(0.91);
}
.card .circle .box span,
.wrapper .card .text{
  background: -webkit-linear-gradient(left, #a445b2, #fa4299);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.circle .box span{
  font-size: 38px;
  font-family: sans-serif;
  font-weight: 600;
  transform: translate(-45%, -45%);
  transition: all 0.1s;
}
.card .circle:hover .box span{
  transform: translate(-45%, -45%) scale(1.09);
}
.card .text{
  font-size: 20px;
  font-weight: 600;
}
@media(max-width: 753px){
  .wrapper{
    max-width: 700px;
  }
  .wrapper .card{
    width: calc(50% - 20px);
    margin-bottom: 20px;
  }
}
@media(max-width: 505px){
  .wrapper{
    max-width: 500px;
  }
  .wrapper .card{
    width: 100%;
  }
}

That’s all, now you’ve successfully created a Responsive Circular Progress Bar using HTML CSS & jQuery. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

]]> https://www.codingnepalweb.com/circular-progress-bar-html-css-jquery/feed/ 7 Circular Progress Bar using HTML CSS & JavaScript https://www.codingnepalweb.com/circular-progress-bar-html-css-javascript/ https://www.codingnepalweb.com/circular-progress-bar-html-css-javascript/#comments Fri, 17 Jul 2020 04:29:00 +0000 https://codingnepalweb.com/2020/07/17/circular-progress-bar-using-html-css-javascript/ Circular Progress Bar using HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create an Animated Circular Progress Bar using HTML CSS & JavaScript. Earlier I have shared a blog on how to create an Animated Gradient Shiny Loader. And now I’m going to create a circular progress bar with a percentage.

The Circular Progress Bar component lets you show the progress of a specific operation, using, as a progress bar, a circular SVG pattern. Changing the stroke-dash offset and stroke-dash array values of the second shape creates the fill effect.

In this program (Circular Progress Bar), at first, on the webpage, this circular progress bar is in the initial stage where there is no circle animation and the percentage of this bar is also stops at 0%. And when you refresh the browser then the circular bar creates the color fill effect and the percentage of this bar is also starts increasing. When it completed 100%, the fill effect stops filling as well the percent number also stops increasing.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Circular Progress Bar).

Video Tutorial of Circular Progress Bar with the Percentage 

 
In the video, you have seen the animation and effect of this circular bar and I hope you have understood the basic codes behind creating this program. The color fill effect of this circular bar is totally based on CSS that means using the only CSS I created the fill animation of this program. But I used JavaScript for increasing the percent number to 100%.

If you have a little bit of knowledge of JavaScript, then you can easily understand the JavaScript codes of this program and as you know CSS is too easy to understand and the color fills effect of this program is based on CSS only. If you like this program (Circular Progress Bar) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Circular Progress Bar with Percent [Source Codes]

To create this program (Circular Progress Bar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <html lang="en" dir="ltr">
      <head>
         <meta charset="utf-8">
         <title>Circular Progress Bar | CodingNepal</title>
         <link rel="stylesheet" href="style.css">
      </head>
      <body>
         <div class="circular">
            <div class="inner"></div>
            <div class="outer"></div>
            <div class="numb">
               0%
            </div>
            <div class="circle">
               <div class="dot">
                  <span></span>
               </div>
               <div class="bar left">
                  <div class="progress"></div>
               </div>
               <div class="bar right">
                  <div class="progress"></div>
               </div>
            </div>
         </div>
         <script>
            const numb = document.querySelector(".numb");
            let counter = 0;
            setInterval(()=>{
              if(counter == 100){
                clearInterval();
              }else{
                counter+=1;
                numb.textContent = counter + "%";
              }
            }, 80);
         </script>
    </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@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;
}
html,body{
  display: grid;
  height: 100%;
  text-align: center;
  place-items: center;
  background: #dde6f0;
}
.circular{
  height: 100px;
  width: 100px;
  position: relative;
}
.circular .inner, .circular .outer, .circular .circle{
  position: absolute;
  z-index: 6;
  height: 100%;
  width: 100%;
  border-radius: 100%;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
}
.circular .inner{
  top: 50%;
  left: 50%;
  height: 80px;
  width: 80px;
  margin: -40px 0 0 -40px;
  background-color: #dde6f0;
  border-radius: 100%;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.circular .circle{
  z-index: 1;
  box-shadow: none;
}
.circular .numb{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-size: 18px;
  font-weight: 500;
  color: #4158d0;
}
.circular .bar{
  position: absolute;
  height: 100%;
  width: 100%;
  background: #fff;
  -webkit-border-radius: 100%;
  clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress{
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-border-radius: 100%;
  clip: rect(0px, 50px, 100px, 0px);
}
.circle .bar .progress, .dot span{
  background: #4158d0;
}
.circle .left .progress{
  z-index: 1;
  animation: left 4s linear both;
}
@keyframes left {
  100%{
    transform: rotate(180deg);
  }
}
.circle .right{
  z-index: 3;
  transform: rotate(180deg);
}
.circle .right .progress{
  animation: right 4s linear both;
  animation-delay: 4s;
}
@keyframes right {
  100%{
    transform: rotate(180deg);
  }
}
.circle .dot{
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 10px;
  margin-top: -5px;
  animation: dot 8s linear both;
  transform-origin: 0% 50%;
}
.circle .dot span {
  position: absolute;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 100%;
}
@keyframes dot{
  0% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(90deg);
    z-index: 4;
  }
  100% {
    transform: rotate(270deg);
    z-index: 4;
  }
}

That’s all, now you’ve successfully created a Circular Progress Bar using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/circular-progress-bar-html-css-javascript/feed/ 9