Create a Circular Progress Bar using HTML and CSS
Ā
Hey, are you thinking to insert a circular Progress Bar Using Html and Css as an element in your website? Then you are at the right place. First, see the live preview of the Circular Progress Bar.
Live Preview Of How to Create a Circular Progress Bar using HTML and CSS
HTMLĀ code(Main Structure of the circularĀ Progress Bar):-
So as this is only an element of the website this is going to be easy. Only a few lines of codeš.
Ā
I have added two input tags one for the percentage value and the other for the value of color(it may be the name of the color or different types of codes of color).
Finally added an anchor tag that contains the word click. so that on clicking that tag some action will start to perform.
<!DOCTYPE html>
<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>Document</title>
</head>
<body>
<div class="details">
<label for="number">Enter number</label>
<input
type="number"
name="number"
id="number"
placeholder="percentage"
/>
<label for="color">Enter color</label>
<input name="color" id="color" placeholder="color" />
<a href="#" class="submit">click</a>
</div>
<div class="container">
<div class="outer">
<div class="inner"><div class="value1">0</div></div>
</div>
</div>
</body>
</html>
CSS(Styling the CircularĀ Progress Bar):-
CSS contains all the styling content. So Let’s start styling. You should have proper knowledge of flexbox, and basic knowledge of CSS.
One more thing is the ConicĀ Gradient that I have used here.
Ā
Ā
Note:-Before starting the styling codes firstly link your CSS file if you are writing external CSS.
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
background-color: rgb(215, 215, 243);
height: 50vh;
width: 50vw;
margin: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.details {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#number,
#color,
#time {
width: 300px;
height: 12px;
padding: 10px;
margin: 10px;
font-size: 15px;
}
.outer {
background-color: white;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px -5px 5px rgba(0, 0, 0, 0.2);
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
}
.inner {
background-color: rgb(215, 215, 243);
height: 160px;
width: 160px;
border-radius: 50%;
position: absolute;
top: 20px;
right: 20px;
}
.value1 {
position: absolute;
top: 46%;
text-align: center;
width: 100%;
font-size: 20px;
}
a {
text-decoration: none;
padding: 10px;
background-color: black;
color: white;
border-radius: 4px;
}
styling is very basic the only thing that is required is your knowledge of CSS.
Javascript (Functioning of the CircularĀ Progress Bar):-
Javascript is the main content of a website that adds dynamicity to your webpage and adds more functions to your webpage.
Ā
Note:-Before starting the Javascript codes firstly link your Javascript file if you are writing external Javascript.
Ā
DOM is used and some inbuilt functions like setInterval and clear Interval are used.
const number=document.getElementById("number");
const value1=document.querySelector(".value1");
const outer=document.querySelector(".outer");
const submit=document.querySelector(".submit");
const color=document.getElementById("color");
const duration=document.getElementById("time");
const time=100;
var num=0;
submit.addEventListener("click",()=>{
num=0;
var color1=color.value;
var numb=setInterval(()=>{
value1.innerHTML=`${num}%`
num=num+1;
outer.style.backgroundImage=`conic-gradient(${color1} ${num*3.6}deg,white ${num*3.6}deg)`
if(num>number.value){
clearInterval(numb);
}
},time);
})setInterval function is used to repeat a function after a fixed interval and this will stop executing when clearInterval is executed.
We have used addEventListener and added an event click which means the function inside the block runs when the event is active as here event is clicked when the content which is tagged is clicked.
I have also added dynamic styling through Javascript and give the background a conic gradient.
Final Output Of How to Create a Circular Progress Bar using HTML and CSS
Ā
Ā
I hope you have liked it. Wait, Did you still not implement it So why are you waiting, go and implement it nowš.
Ā
Ā
If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.
Ā
You can follow me onĀ Instagram.
Ā
Written by @Himanshu Singh.
