<progress>
A progress bar for a task: uploading a file, an installation, or course completion.
- Display
- inline-block
- Closing tag
- Required
- Permitted content
- Phrasing content without other
<progress>elements
Example
#<p><label for="course-progress">HTML course: 18 of 24 lessons</label></p>
<progress id="course-progress" value="18" max="24">75%</progress>Definition and usage
#The <progress> element shows how far a task has gotten. The max attribute sets the whole (1 by default), and value the current progress, so <progress value="7" max="10"> displays a bar filled to 70%.
Without a value attribute, the bar is indeterminate: the browser usually shows a waiting animation that says "something is happening, but there’s no telling how long it’ll take". That’s a good state while connecting to the server, before you know the file’s size.
<progress> is for progress over time. To measure a value within a range, such as disk space used or password strength, use <meter> instead. The bar also needs a label, ideally through <label> or aria-label, so a screen reader knows what the progress is about.
Syntax
#<progress value="30" max="100">30%</progress>Attributes
#number from 0 to the value of `max`
The current progress. Without this attribute, the bar becomes indeterminate and shows a waiting animation, as in the second line of the example.positive number (1 by default)
The value that means the whole task is complete. You can give the number of lessons, megabytes or steps, instead of converting everything to a percentage.
The element also supports all global attributes, such as class, id, style and hidden.
Attributes in practice
#value
number from 0 to the value of `max`The current progress. Without this attribute, the bar becomes indeterminate and shows a waiting animation, as in the second line of the example.
<p>Uploading the file: <progress value="0.4" aria-label="Uploading the file">40%</progress></p>
<p>Connecting to the server: <progress aria-label="Connecting to the server"></progress></p>max
positive number (1 by default)The value that means the whole task is complete. You can give the number of lessons, megabytes or steps, instead of converting everything to a percentage.
<p>Step 2 of 5 <progress value="2" max="5" aria-label="Registration progress"></progress></p>Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- The text between the tags, such as "75%", isn’t visible in modern browsers. If the number should be visible, write it next to the bar.
- The simplest way to change the bar’s color is
accent-color, for exampleprogress { accent-color: #8b5cf6; }.
Related entries
#- <meter>A gauge for a value within a known range: disk space used, a test score, battery level.
- <output>The result of a calculation or a user action, for example a total in a calculator.
- <label>A form field’s label. Clicking the label moves the cursor to the field.
- <form>A form that collects data from the user and sends it to a given address.
Spotted a mistake or missing an example? Write to us.