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.

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
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! 🚀