Building a Stylish Circular Progress Bar with HTML and CSS

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.

Figure: Circular Progress Bar

HTML Structure

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

Container Setup

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

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

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-gradient creates a radial pattern for the background, and the conic-gradient represents the progress.
  • Animation: The animation property is used to apply the “progress” animation, creating a smooth transition in the progress visualization.

Progress Percentage Display

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

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

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:

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!

Leave a Reply

Your email address will not be published. Required fields are marked *