Circular Progress Bar using HTML,CSS and Javascript - Codewithrandom

Circular Progress Bar using HTML, CSS, and Javascript - Codewithrandom

Circular Progress Bar using HTML,CSS and Javascript - Codewithrandom


Hey, are you thinking to insert a circular progress bar as an element in your website? Then you are at the right place. First, see the live server of the circular progress bar.

LIVE SERVER:-

See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.

HTML  code(Frame of the website):-
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 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 website):-

CSS contains all the styling content. So Let's start styling. You should have proper knowledge of flexbox, basic knowledge of CSS.
One more thing is 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 webpage):-

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.


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.

Post a Comment

Previous Post Next Post