In the world of web development, user interfaces play a vital role in engaging visitors. Progress bars are a powerful visual tool that not only provides feedback on ongoing processes but also enhances the overall user experience. In this blog post, we’ll explore the creation of a visually appealing circular progress bar using HTML and CSS. Let’s break down the code step by step for a comprehensive understanding.
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags and title -->
</head>
<body>
<div class="outer-container">
<div class="container">
<!-- Circular progress bar will go here -->
</div>
</div>
</body>
</html>The HTML structure begins with the standard document type declaration, meta tags, and the opening <html>, <head>, and <body> tags. The progress bar will be placed within a nested set of div elements with the classes “outer-container” and “container.”
Styling the Body
body {
background-color: #ffffff;
}Container Setup
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.outer-container {
margin-top: 10vh;
}These CSS rules style the container divs. The “container” class uses flex properties to center its content both horizontally and vertically, while the “outer-container” class introduces some top margin to the layout.
CSS Custom Property and Keyframes Animation
@property --progress-value {
syntax: "<integer>";
initial-value: 0;
inherits: false;
}
@keyframes progress {
to {
--progress-value: 85;
}
}These CSS rules introduce a custom property, --progress-value, which will be used to dynamically control the progress percentage. The @keyframes animation named “progress” smoothly transitions the --progress-value from 0 to 85 over a duration of 2 seconds.
Progress Bar Styling
.progress-bar {
display: flex;
justify-content: center;
align-items: center;
width: 170px;
height: 170px;
border-radius: 50%;
background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
conic-gradient(#49b8fe calc(var(--progress-value) * 1%), #9bd0f0 0);
animation: progress 2s 1 forwards;
}
.progress-bar::before {
counter-reset: percentage var(--progress-value);
content: counter(percentage) "%";
animation: progress 2s 1 forwards;
}This block of code defines the styling for the circular progress bar. Let’s break down the key components:
Flex Container: The progress bar is a flex container, enabling us to center its content both horizontally and vertically.
- Flex Container: The progress bar is a flex container, enabling us to center its content both horizontally and vertically.
- Circular Shape: The width and height are set to 170px, creating a perfect circle with a border-radius of 50%.
- Background Gradients: Two gradients are applied to achieve the desired visual effect. The
radial-gradientcreates a radial pattern for the background, and theconic-gradientrepresents the progress. - Animation: The
animationproperty is used to apply the “progress” animation, creating a smooth transition in the progress visualization.
Progress Percentage Display
.progress-bar::before {
counter-reset: percentage var(--progress-value);
content: counter(percentage) "%";
animation: progress 2s 1 forwards;
}This pseudo-element is responsible for displaying the progress percentage in the center of the circular bar. The counter-reset property initializes a counter named “percentage” with the value of --progress-value. The content property dynamically shows the counter value followed by “%”. The same “progress” animation is applied to maintain synchronization with the main progress animation.
Adding Progress Bar to HTML
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>This div element with the class “progress-bar” is where the circular progress bar is implemented. It includes ARIA attributes (role, aria-valuenow, aria-valuemin, aria-valuemax) for accessibility, providing information about the current progress to screen readers.
Styling the Progress Bar
.progress-bar {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-family: "mona-regular", sans-serif;
width: 170px;
height: 170px;
border-radius: 50%;
background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
conic-gradient(#49b8fe calc(var(--progress-value) * 1%), #9bd0f0 0);
animation: progress 2s 1 forwards;
}
.progress-bar::before {
counter-reset: percentage var(--progress-value);
content: counter(percentage) "%";
animation: progress 2s 1 forwards;
}This block of CSS code defines the styling for the progress bar, including its size, font, circular shape, background gradients, and animation. The --progress-value variable dynamically controls the progress percentage.
Combined full code:
<!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>Progress</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #ffffff;
}
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.outer-container {
margin-top: 10vh;
}
@property --progress-value {
syntax: "<integer>";
initial-value: 0;
inherits: false;
}
@keyframes progress {
to {
--progress-value: 85; /* changing the value changes the percentage in progress ring */
}
}
.progress-bar {
display: flex;
justify-content: center;
align-items: center;
width: 170px;
height: 170px;
border-radius: 50%;
background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
conic-gradient(#49b8fe calc(var(--progress-value) * 1%), #9bd0f0 0);
animation: progress 2s 1 forwards;
}
.progress-bar::before {
counter-reset: percentage var(--progress-value);
content: counter(percentage) "%";
animation: progress 2s 1 forwards;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="container">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
</div>
</body>
</html>
Conclusion
We’ve thoroughly examined the HTML and CSS code for creating a stylish circular progress bar. From setting up the HTML structure to defining custom fonts, and finally, styling the progress bar itself, every aspect has been covered.
Feel free to use this code as a foundation for your projects. You can customize the font, colors, and animations to suit your design preferences. The combination of Google Fonts, custom fonts, and the use of CSS variables allows for flexibility and easy adaptation.
We hope this detailed breakdown has helped understand how to create an aesthetically pleasing and functional circular progress bar. If you have any questions or would like further clarification on any aspect of the code, feel free to reach out. Happy coding!