Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Syntax
The basic structure for creating a circular progress bar involves using CSS gradients and animations
.progress-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background:
radial-gradient(closest-side, color 60%, transparent 60%),
conic-gradient(fill-color percentage%, background-color 0);
}
Method 1: Using CSS Custom Properties and Animations
Let's look at the following example, where we are going to create a circular progress bar using HTML and CSS with animated counters
<!DOCTYPE html>
<html>
<head>
<style>
@property --tutorial-value {
syntax: '<integer>';
inherits: false;
initial-value: 1;
}
@keyframes bikes-progress {
to { --tutorial-value: 95; }
}
@keyframes cars-progress {
to { --tutorial-value: 82; }
}
.tutorial-bar {
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.tutorial-bar::before {
counter-reset: percentage var(--tutorial-value);
content: counter(percentage) '%';
color: #333;
}
.bikes {
background:
radial-gradient(closest-side, #D5F5E3 60%, transparent 60% 40%),
conic-gradient(#BB8FCE calc(var(--tutorial-value) * 1%), #AED6F1 0);
animation: bikes-progress 2s 1 forwards;
}
.bikes::before {
animation: bikes-progress 2s 1 forwards;
}
.cars {
background:
radial-gradient(closest-side, #D5F5E3 60%, transparent 60% 40%),
conic-gradient(#BB8FCE calc(var(--tutorial-value) * 1%), #AED6F1 0);
animation: cars-progress 2s 1 forwards;
}
.cars::before {
animation: cars-progress 2s 1 forwards;
}
body {
font-family: Verdana, sans-serif;
display: flex;
justify-content: space-around;
align-items: center;
max-width: 500px;
margin: 0 auto;
background-color: #EBDEF0;
padding: 20px;
}
.tutorial-bar-container {
text-align: center;
}
h2 {
margin-bottom: 15px;
color: #333;
}
</style>
</head>
<body>
<div class="tutorial-bar-container">
<h2>BIKES</h2>
<div class="tutorial-bar bikes"></div>
</div>
<div class="tutorial-bar-container">
<h2>CARS</h2>
<div class="tutorial-bar cars"></div>
</div>
</body>
</html>
Two animated circular progress bars appear on the page. The bikes progress bar fills to 95% and the cars progress bar fills to 82%, both with purple gradients and animated percentage counters.
Method 2: Simple Static Progress Circles
Here's a simpler approach for creating static circular progress bars without animations
<!DOCTYPE html>
<html>
<head>
<style>
.progress-circle {
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
margin: 20px;
}
.progress-75 {
background:
radial-gradient(closest-side, white 60%, transparent 60%),
conic-gradient(#4CAF50 75%, #e0e0e0 0);
color: #4CAF50;
}
.progress-60 {
background:
radial-gradient(closest-side, white 60%, transparent 60%),
conic-gradient(#2196F3 60%, #e0e0e0 0);
color: #2196F3;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="container">
<div class="progress-circle progress-75">75%</div>
<div class="progress-circle progress-60">60%</div>
</div>
</body>
</html>
Two static circular progress bars are displayed: one green circle showing 75% completion and one blue circle showing 60% completion.
Key Points
- Conic Gradient: Creates the circular fill effect by defining the progress angle
- Radial Gradient: Creates the hollow center appearance
- CSS Custom Properties: Allow dynamic value changes for animations
- Border-radius: Set to 50% to create perfect circles
Conclusion
Circular progress bars provide an elegant way to display progress data in a compact, visually appealing format. Using CSS gradients and custom properties, you can create both static and animated versions to enhance user experience on your website.
2K+ Views
