Progress Bar

Component Behavior

Use this component to visually represents the completion of a task.

As the progress changes (e.g., during a file upload or task completion), the progress bar's visual width adjusts according to the percentage of the task completed. This is typically done by updating the value or width of the progress bar element.

Optionally, a percentage or text indicating the progress (e.g., "50% complete") can be displayed inside or alongside the progress bar. This provides a clear, visible indication of how far the task has progressed.

Accessibility Guidelines

The <progress> element and .ila-progress-bar use role="progressbar" to identify as a progress indicator. ARIA attributes are also used to communicate progress to screen readers and assistive technologies:

  • aria-valuenow: Indicates the current value of the progress. This should reflect the value of the value attribute of the <progress> element.
  • aria-valuemin: Specifies the minimum value, which typically matches the min attribute of the element. If not defined, it defaults to 0.
  • aria-valuemax: Specifies the maximum value, usually equal to the max attribute. If not defined, it defaults to 1.

If the progress bar represents something that updates in real time, like file uploads or task progress, the component should regularly update aria-valuenow and style="width" attributes. Optional text or percentage within the .ila-progress-bar should also be kept updated for sighted users.

Component Example

Using div version for custom text

25%
50%
75%
100%
HTML 
<div class="ila-progress" role="progressbar" aria-label="Progress example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    <div class="ila-progress-bar" style="width: 0%"></div>
</div>
<div class="ila-progress" role="progressbar" aria-label="Progress example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="ila-progress-bar" style="width: 25%">25%</div>
</div>
<div class="ila-progress" role="progressbar" aria-label="Progress example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="ila-progress-bar" style="width: 50%">50%</div>
</div>
<div class="ila-progress" role="progressbar" aria-label="Progress example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="ila-progress-bar" style="width: 75%">75%</div>
</div>
<div class="ila-progress" role="progressbar" aria-label="Progress example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="ila-progress-bar" style="width: 100%">100%</div>
</div>

Height

The height of the .ila-progress container can be adjusted, and the .ila-progress-bar inside will automatically resize to match the new height.

60%
HTML 
<div class="ila-progress" role="progressbar" aria-label="Progress example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height:5px">
    <div class="ila-progress-bar" style="width: 60%"></div>
</div>
<div class="ila-progress" role="progressbar" aria-label="Progress example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height:24px">
    <div class="ila-progress-bar" style="width: 60%">60%</div>
</div>

Using the <progress> element

HTML 
<progress role="progressbar" tabindex="0" aria-label="File upload" value="20" aria-valuemin="0" aria-valuenow="20" aria-valuemax="100" max="100"></progress>

Link

Link to this component on GitHub