Get the 2024 Yearly Goals and Progress Tracker Notion Template for FREE!

How to Style Html Progress Bar

Posted on: Dec 15, 2023

1 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 demo on CodePen: https://codepen.io/timonwa/pen/yLZdMrq

Connect With Me

Follow me on X(Twitter), and LinkedIn to stay updated with my latest content.

If you like my notes and want to support me, you can sponsor me on GitHub Sponsor, or you can buy me a virtual ice cream on ByMeACoffee or Selar. I would really appreciate it. 🙏

For other ways to support me, visit my Sponsorship page or Affiliate Links page.

Subscribe to my newsletter 💌

Never miss a beat! Stay updated with my latest tech tutorials, code snippets, how-to guides, productivity tips, personal projects and experiences, and more! 💻📚✨