everything about web

A Comprehensive Guide to the World of Web Design & Development:

CSS, HTML, Performance, Web Design, and all Aspects of Front-End Development


How to Create a Progress Bar from Pure HTML – HTML Progress Tag

How to Create a Progress Bar from Pure HTML – HTML Progress Tag
  1. HTML – <progress>
  2. Indeterminate vs. Determinate
  3. CSS styling for HTML <progress>
  4. Browser compatibility

HTML – <progress>

The HTML <progress> tag illustrates a bar to represent the current percentage of an ongoing work. Generally, the progress bar is formed by 2 attributes, which are: value (the amount of work completed) and max (the amount of work in total).

Based on the figure from value and max, the browser will automatically calculate the percentage and adjust the length of the value bar, and then display it accordingly.

HTML element<progress>
In this example:

– Amount of work in total: 100
– Amount of work completed: 59

 <progress value="59" max="100"> </progress>


AttributeDescriptionValue typeDefault valueMandatory
valueValue of work completed

(the value must fall between 0 and max.

If max is not defined, the default max value will be 1,
then the range of value shall fall between 0 and 1)
maxValue of work in total

(the value must be greater than 0)

During the resize, the progress value bar will automatically scale to fit its ratio.

Indeterminate vs. Determinate

Generally, we have 2 types of progress bars:

  1. Indeterminate – if the progress bar has NOT included any value attribute
  2. Determinate – if the progress bar has included a value attribute
    <progress max="100"> </progress>
    <progress value="59" max="100"> </progress>

How to Style HTML <progress> from CSS

The appearance of the HTML progress bar differs from browser to browser. To define the desired appearance for your HTML progress bar, first of all, you need to reset the progress bar to its default appearance.


/*style for overall progress bar */
    /*reset to default appearance*/ 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    width: 200px;
    height: 20px;
    border-radius: 20px;
    border: 1px solid #434343;

/*style for background track*/
progress::-webkit-progress-bar {
    background: rgb(221, 221, 221);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
    border-radius: 20px;
/*style for progress track*/
progress::-webkit-progress-value {
    background-image: linear-gradient(120deg,#ffd173 0,#18cc00 55%);
    border-radius: 20px;

    <progress value="59" max="100"> </progress>


For a quick solution to style the overall theme color, you can also choose to use CSS accent-color. To understand more about the usage of CSS accent-colorhttps://uipencil.com/2022/08/20/css-accent-color/

Browser compatibility

Chrome 6
Edge 12
Safari 6
Firefox 6
Opera 11
Chrome Android
WebView Android
iOS Safari 7
Firefox Android 6
Opera Android 11
Samsung Internet

source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#browser_compatibility

Last but not least

One important note is that people should not mix up the usage of <meter> and <progress>. By just looking at the appearances, they may seem identical (with just a bar with a track). But one should note that <progress> should only be used to display progress, while <meter> should mainly be used to display gauge. To know more details about <meter>, you may refer to the post below.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

If you found this article helpful and would like to show your support, you can buy me a coffee using the link below. Thanks a bunch!

Choose an amount


Or enter a custom amount


Thank you for your contribution!



CSS (27) css pseudo (3) debug (2) design (4) fonts (2) html (6) image (8) layout (5) optimization (10) performance (9) responsive (8) Software-development (1)


Recent Post:


Related Posts

%d bloggers like this: