Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Circular Progress Bar using HTML and CSS
A progress bar displays the status of a procedure within an application. A progress bar shows how much of the process has already been completed and how much is still left to do. The various components of the progress bar will be designed using HTML, and the progress bar itself may be modified using CSS properties.
Progress bars are frequently used on websites to highlight particular data in a more appealing way for users. One advantage of employing a circle progress bar over a standard (horizontal) progress bar is that you can accommodate more progress bars in one row, showing the user more info. Let’s dive into the article to learn how to create a circular progress bar using HTML and CSS.
Example
Let’s look at the following example, where we are going to create a circular progress bar using HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<style>
@property --tutorial-value {
syntax: '<integer>'; inherits: false;
initial-value: 1;
}
@keyframes x-tutorial {
to {
--tutorial-value: 95;
}
}
@keyframes y-tutorial {
to {
--tutorial-value: 82;
}
}
.tutorial-bar {
width: 100px;
height: 100px;
border-radius: 60%;
display: flex;
justify-content: center;
align-items: center;
}
.tutorial-bar::before {
counter-reset: percentage var(--tutorial-value);
content: counter(percentage) '%';
}
.x {
background:
radial-gradient(closest-side, #D5F5E3 60%, transparent 60% 40%),
conic-gradient(#BB8FCE calc(var(--tutorial-value) * 1%), #AED6F1 0);
animation: x-tutorial 1s 1 forwards;
}
.x::before {
animation: x-tutorial 2s 1 forwards;
}
.y {
background:
radial-gradient(closest-side, #D5F5E3 60%, transparent 60% 40%),
conic-gradient(#BB8FCE calc(var(--tutorial-value) * 1%), #AED6F1 0);
animation: y-tutorial 1s 1 forwards;
}
.y::before {
animation: y-tutorial 2s 1 forwards;
}
body {
font-family: verdana;
display: flex;
justify-content: space-around;
max-width: 500px;
}
h2 {
text-align: center;
}
progress {
visibility: hidden;
width: 0;
height: 0;
}
</style>
</head>
<body style=background-color:#EBDEF0>
<div class="tutorial-bar-container">
<h2>
<label for="x">BIKES</label>
</h2>
<div class="tutorial-bar x">
<progress id="x" min="1" max="99" value="92"></progress>
</div>
</div>
<div class="tutorial-bar-container">
<h2>
<label for="y">CARS</label>
</h2>
<div class="tutorial-bar y">
<progress id="y" min="1" max="99" value="87"></progress>
</div>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the circular progress bar for the two elements, one being a bike and another being a car, applied with a CSS displayed on the webpage.
63 Views
