How to Style Html Progress Bar

Posted on: Dec 15, 2023

2 mins read


Progress Bars are a great way to showcase progress in a visually appealing way for tasks such as file uploads, form submissions, and more. This code snippet shows how to style the HTML Progress Bar element.

How to Style Html Progress Bar.

HTML Progress Bar

A styled HTML Progress Bar

Code

html
<div class="progress-bar__wrapper">
<label class="progress-bar__value" htmlFor="progress-bar"> 40% </label>
<progress id="progress-bar" value="40" max="100"></progress>
</div>
css
.progress-bar__wrapper {
position: relative;
}
.progress-bar__value {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
progress {
width: 100%;
height: 20px;
border-radius: 50px;
background-color: #eee;
transition: width 300ms ease;
}
progress[value]::-webkit-progress-bar {
width: 100%;
height: 20px;
border-radius: 50px;
background-color: #eee;
transition: width 300ms ease;
}
progress[value]::-webkit-progress-value {
width: 0;
border-radius: 50px;
background-color: maroon;
transition: width 300ms ease;
}

Explanation

This code utilizes the standard HTML <progress> element to create a visually appealing progress bar. The <label> element is positioned within the bar as a dynamic value indicator. The accompanying CSS styles enhance the aesthetics with smooth transitions and rounded edges, providing a polished appearance for the HTML Progress Bar.

Demo

**View the progress bar on CodePen**: [https://codepen.io/timonwa/pen/yLZdMrq](https://codepen.io/timonwa/pen/yLZdMrq)

Connect with Me

Did you find this article helpful? I'd love to hear your thoughts or answer any questions!

🔗 Connect with me on LinkedIn or follow me on X(formerly Twitter) for daily tips and updates

✉️ Subscribe to my Newsletter for weekly dev insights

👩‍💻 Check out my open source projects on GitHub

Buy Me a Coffee if this article helped you

❤️ Become a GitHub Sponsor to support my open source work

🤝 Visit my Sponsorship page or Affiliate Links page for more ways to support me

Happy coding! 🚀

Simplify your workflow with free, ready-to-use Notion templates!

Subscribe to my newsletter 💌

Stay in the loop on the latest articles, tutorials, projects, and exclusive content focused on web development! 💻📚✨