Introduction of CSS Circular Progress Bar
Today we are again here with our new project, which is the Download Progress Bar ( CSS Circular Progress Bar ). This is made with the help of HTML, CSS, and JavaScript by doing their simple and easy code step by step. In this project, there will be a progress bar for downloading. Which will be at zero when it starts, and when downloading starts, the progress bar will increase. The number will increase, and there will also be a progress bar. That is around the numbers in a circle path, and when the download is completed. The progress bar will stop and the complete circle the complete circle will have been completed.
Now let’s start making this Circular progress Bar CSS without wasting any time with the help of HTML, CSS, and JavaScript. The code is not very difficult, as a beginner or an experienced guy can both understand it without any doubt. If you’ll have to face any problems while understanding the code. Then you can contact us with the help of the contact details given in the footer of this page.
HTML (HyperText Markup)
First, we will make the structure of this CSS Circular Progress Bar with the help of following the code of HTML (Hyper Text Markup Language, this is a markup language. That is used to make web pages by writing the code in a text editor). In this project, first we will give the title of the project in the “title tag (this is used to give the title of the project). Then we will move toward the main content.
We will make a parent div that will contain the Circular progress Bar CSS and a child div in which the counting will increase with the progress bar in a circular path. In the child div, there are two divs for the interior and exterior design of the progress bar in the circular path and one more div for numbering that is 0 initially. There will be another div in the child div for the dot that will move in the circular path with a background color.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Circular Process Bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<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>
</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>CSS (Cascading Style Sheet)
After making the structure of this Dowload Progress Bar ( CSS Circular Progress Bar ) with the help of HTML. Now we will give it some styling. We will use CSS for Styling our project. In this, we will first make the background black using the background-color property. Take the whole parent div to the center of the screen. We will adjust the size and position of the parent div of the progress bar by giving a border, box shadow, and border radius to the parent div. Now we will move toward the progress bar, in which we will design the circular path. The background color of the dot, and also the numbers.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container
{
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
border-radius: 20px;
}
html,body{
display: grid;
height: 100%;
text-align: center;
place-items: center;
background: black;
}
.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: #030303;
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: rgb(255, 0, 0);
}
.circular .bar{
position: absolute;
height: 100%;
width: 100%;
background: #fff;
border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar .progress{
position: absolute;
height: 100%;
width: 100%;
border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
}
.circle .bar .progress, .dot span{
background: rgb(253, 1, 1);
}
.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;
}
}
/* <html lang="en" dir="ltr">
<html lang="en" dir="ltr"> */Javascript
After designing the whole structure of this Circular progress Bar CSS. We now have to do the main work to implement the logic in the numbers given in a child div. This can be done with the help of JavaScript, which is a programming language that can be used to implement the logic in front-end web pages. In this, we will target the div of numbers with the help of classes, or Id. Then we will use the logic, like using the setinterval property and conditional statement. To increase the counting by one from zero to 100.
Output of CSS Circular Progress Bar
Finally, we have made the fully functional download progress ( CSS Circular Progress Bar ) with the help of the simple and easy code of HTML, CSS, and JavaScript. Our main purpose is to provide you with the best content. New ideas for making such projects to increase your practice. If you want the source code, click on the button given below to download it.
For more explanation, click on the link given below to watch the video.
You can also check:
One Response
Loading bar is the best component for me.