July 28, 2026 in CSS, HTML

Styling Progress Bars with HTML and CSS

Progress bars are a simple yet powerful way to visualize data, track completion, and enhance user experience. With just a few lines of HTML and CSS, you can transform the default <progress> element into a clean, modern component that fits seamlessly into your design.

HTML Structure

The progress bar layout consists of a list where each item represents a specific category—such as Website Design, Website Development, and more. Each section displays a title and a percentage value, followed by the corresponding <progress> element.

<ul class="progress-bar">
    <li>
	<h3>Website Design <span class="percentage">89%</span></h3>
	<progress value="89" max="100"></progress>
    </li>
</ul>

Key Points:

• <h3> displays the category title.
• .percentage shows the completion value (e.g., 89%).
• The <progress> tag visually represents the percentage.

CSS Styling Overview

The .progress-bar class defines the overall container styling, including:

• No left padding
• Roboto font family with a light (300) font weight
• Black text color (#000)

Individual items inside the list are styled using the <li> element, while headings and percentage labels are styled via h3 and .percentage.

Customizing the <progress> Element

The native progress bar is enhanced through custom CSS:

• Border: 1px solid #ececec
• Background: white
• Height: 14px
• Rounded Corners: 8px
• Track Color: light gray (#ececec)
• Line Height: adjusted for visual balance

Additional Styling for the Progress Bar:

• The progress bar has a gray border (border: 1px solid #ececec) and a white background (background: $white).
• The height of the progress bar is set to 14 pixels.
• The line height is adjusted to 32 pixels.
• The color of the progress bar is light gray (color: #ececec).
• It has rounded corners with a border radius of 8 pixels.

Because different browsers render <progress> differently, browser-specific pseudo-elements are used:

For Firefox:

::-moz-progress-bar { 
  background: #14a800; 
}

For Chrome, Safari, and other WebKit browsers:

::-webkit-progress-bar { 
  background: #ffffff; 
}

::-webkit-progress-value { 
  background: #14a800; 
}

This ensures your progress bars look consistent across modern browsers.

Final Result

By combining structured HTML with customized CSS, you can create a polished, visually appealing progress bar system for showcasing skills, project milestones, or website stats. The design is easy to tweak—adjust colors, radii, heights, or fonts to match your brand or UI theme.

See the Pen Styling Progress Bar by Jaspreet (@jasjain) on CodePen.

See the Pen Styling Progress Bar by Jaspreet (@jasjain) on CodePen.