How to Create Circular Progress Bar
with HTML CSS and JavaScript
Round Progress Bar is the liveliness of an advancing bar in a round movement and it is utilized to show data like abilities in some field, information, and as like this. You might have seen the round improvement bar on somebody's portfolio site, where they show the capacity of something that they have in the rate esteem.
Video Tutorial of Circular Progress Bar
Circular Progress Bar [Source Codes]
To Create Circular Progress Bar with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title> Circul Progress Bar </title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="container">
- <div class="circular-progress">
- <span class="progress-value">0%</span>
- </div>
-
- <span class="text">Javacript</span>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- *{
- 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: #282A35;
- }
- .container{
- display: flex;
- width: 420px;
- padding: 50px 0;
- border-radius: 8px;
- background: #f2f2f2;
- row-gap: 30px;
- flex-direction: column;
- align-items: center;
- }
- .circular-progress{
- position: relative;
- height: 250px;
- width: 250px;
- border-radius: 50%;
- background: conic-gradient(#2098EE 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: #f2f2f2;
- }
- .progress-value{
- position: relative;
- font-size: 40px;
- font-weight: 600;
- color: #282A35;
- }
- .text{
- font-size: 30px;
- font-weight: 500;
- color: #606060;
- }
Now paste the following codes into your script.js file
- let circularProgress = document.querySelector(".circular-progress"),
- progressValue = document.querySelector(".progress-value");
-
- let progressStartValue = 0,
- progressEndValue = 85,
- speed = 100;
-
- let progress = setInterval(() => {
- progressStartValue++;
-
- progressValue.textContent = `${progressStartValue}%`
- circularProgress.style.background = `conic-gradient(#2098EE ${progressStartValue * 3.6}deg, #ededed 0deg)`
-
- if(progressStartValue == progressEndValue){
- clearInterval(progress);
- }
- }, speed);
If you face any difficulties while creating Circular Progress Bar or your code is not working as expected, you can download the source code files by clicking download button.