Create Circular Progress Bar in HTML CSS & JavaScript

CodingNepal — Wed, 15 Jun 2022 21:11:20 +0000

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.

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.



    
    
        
        
        
         Circular Progress Bar 

        
        
                                        
    
    
        
            
                0%
            

            HTML & CSS

/* 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);

Animated Skills Bar in HTML & CSS | Progress Bar

CodingNepal — Tue, 26 Apr 2022 21:11:19 +0000

Hello friend, I hope you are doing well. Today in this blog, you are going to learn to create an Animated Skills Bar in HTML and CSS. There are lots of progressing bars I already have created. Today’s project will be something different and useful as usual.

Skills Bar is this combination of different skills that someone has, it is like the qualification of the particular person for the particular work. For example, if someone is a front end developer, then he has the knowledge of HTML, CSS, Adobe XD and basic JavaScript.

Let’s have a quick look at the given image of our project that we are going to create [Animated Skills Bar in HTML & CSS]. On the image, we can see a total of four bars. Every bar has a different title and percentage. When the page will refresh or open that percentage of skill got animated.

For the better, you can watch the real demo of our project [Animated Skills Bar in HTML & CSS] and all the HTML and CSS codes that I have used to create this project.

Animated Skills Bar in HTML & CSS | Progress Bar

I have provided all the HTML and CSS codes that I have used to create this animated skills bar. Before getting into the source code file, I would like to explain the given video tutorial for a piece of basic information to you.

As you have seen in the video tutorial of our project [Animated Skills Bar or Progress Bar]. At first, we have seen a total of four bars with different percentages and that is the actual percentage skills someone has for example. When I refreshed the webpage all the skill bars progressed one by one with beautiful animation. As you have got the idea for the animation for the skill’s percentage bar I have used CSS animation.

Now I believe, you can build this Skills Bar with Progressing Animation using HTML and CSS. If you are feeling difficulty creating this animated skills bar, I have provided all the HTML and CSS code below.

Animated Skills Bar [Source Code]

To get the following HTML CSS for an Animated Skills 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.





    
    
    
    
    
    
    
   Animated Skills Bar


    
        
            HTML

            
                
                    90%
                
            
        

        
            CSS

            
                
                    70%
                
            
        
        
            JavaScript

            
                
                    50%
                
            
        
        
            NodeJS

            
                
                    30%

/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    height: 100vh;
    display: flex;
    background: #4070f4;
    align-items: center;
    justify-content: center;
}
.container{
    position: relative;
    max-width: 500px;
    width: 100%;
    background: #fff;
    margin: 0 15px;
    padding: 10px 20px;
    border-radius: 7px;
}
.container .skill-box{
    width: 100%;
    margin: 25px 0;
}
.skill-box .title{
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.skill-box .skill-bar{
    height: 8px;
    width: 100%;
    border-radius: 6px;
    margin-top: 6px;
    background: rgba(0,0,0,0.1);
}
.skill-bar .skill-per{
    position: relative;
    display: block;
    height: 100%;
    width: 90%;
    border-radius: 6px;
    background: #4070f4;
    animation: progress 0.4s ease-in-out forwards;
    opacity: 0;
}
.skill-per.css{
    width: 70%;
    animation-delay: 0.1s;
}
.skill-per.javascript{
    width: 50%;
    animation-delay: 0.2s;
}
.skill-per.nodejs{
    width: 30%;
    animation-delay: 0.3s;
}
@keyframes progress {
    0%{
        width: 0;
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
.skill-per .tooltip{
    position: absolute;
    right: -14px;
    top: -28px;
    font-size: 9px;
    font-weight: 500;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    background: #4070f4;
    z-index: 1;
}
.tooltip::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    height: 10px;
    width: 10px;
    z-index: -1;
    background-color: #4070f4;
    transform: translateX(-50%) rotate(45deg);

}

Animated Progress Bar – CodingNepal

Create Circular Progress Bar in HTML CSS & JavaScript

Create Circular Progress Bar | Skills Bar | Video Tutorial

You Might Like This:

Circular Progress [Source Code]

Animated Skills Bar in HTML & CSS | Progress Bar

Animated Skills Bar in HTML & CSS | Progress Bar

You Might Like This:

Animated Skills Bar [Source Code]