Progress Bar

A progress bar component visually communicates the status of an ongoing processes.

When to use

A progress bar should be used to visually indicate task completion, provide feedback during lengthy operations, guide users through multi-step processes, or display percentage metrics.

Anatomy

1. Label (required)

2. Assistive text

Assistive or contextual information about the process taking place.

3. Bar (required)

Bar indicates how much the process has progressed.

4. Track (required)

The area that the bar fills or moves across.

5. Value

A percentage, fraction, or number to indicate progress.

Examples

<div class="ucla-progress">
    <div class="ucla-progress__info">
        <label for="progress" class="ucla-progress__label">Label</label>
        <div class="ucla-progress__percent">100%</div>
    </div>
    <progress class="ucla-progress__bar" id="progress" max="100" value="70"></progress>
    <p class="ucla-progress__assistive">Assistive text goes here</p>
</div>

The progress bar component is built with 2 HTML elements, one for the label and the other for the bar itself.

• .ucla-progress - Main container
  • .ucla-progress__info - Container for the progress bar label
    • label.ucla-progress__label - Progress bar label
    • .ucla-progress__percent - Progress bar value
  • progress.ucla-progress__bar - Progress bar
  • .ucla-progress__assistive - Assistive Text

Bar sizing

Use the following CSS classes in the <progress> tag for the different bar size:

• .ucla-progress__bar--thin
• .ucla-progress__bar--thick
• .ucla-progress__bar--thicker

<!-- Default Progress Bar -->
<div class="ucla-progress">
    <div class="ucla-progress__info">
        <label for="progress-default" class="ucla-progress__label">Default</label>
        <div class="ucla-progress__percent">100%</div>
    </div>
    <progress class="ucla-progress__bar" id="progress-default" max="100" value="70"></progress>
</div>

<!-- Thin Progress Bar -->
<div class="ucla-progress">
    <div class="ucla-progress__info">
        <label for="progress-thin" class="ucla-progress__label">Thin</label>
        <div class="ucla-progress__percent">100%</div>
    </div>
    <progress class="ucla-progress__bar ucla-progress__bar--thin" id="progress-thin" max="100" value="70"></progress>
</div>

<!-- Thick Progress Bar -->
<div class="ucla-progress">
    <div class="ucla-progress__info">
        <label for="progress-thick" class="ucla-progress__label">Thick</label>
        <div class="ucla-progress__percent">100%</div>
    </div>
    <progress class="ucla-progress__bar ucla-progress__bar--thick" id="progress-thick" max="100" value="70"></progress>
</div>

<!-- Thicker Progress Bar -->
<div class="ucla-progress">
    <div class="ucla-progress__info">
        <label for="progress-thicker" class="ucla-progress__label">Thicker</label>
        <div class="ucla-progress__percent">100%</div>
    </div>
    <progress class="ucla-progress__bar ucla-progress__bar--thicker" id="progress-thicker" max="100" value="70"></progress>
</div>

Bar color

Use the following CSS classes in the <progress> tag for the different bar colors:

• .ucla-progress__bar--yellow
• .ucla-progress__bar--light-blue
• .ucla-progress__bar--ucla-blue

<!-- Default Color -->
<div class="ucla-progress">
    <div class="ucla-progress__info">
        <label for="progress-color-default" class="ucla-progress__label">Default Color</label>
        <div class="ucla-progress__percent">100%</div>
    </div>
    <progress class="ucla-progress__bar" id="progress-default-color" max="100" value="70"></progress>
</div>

<!-- UCLA Gold Color -->
<div class="ucla-progress">
    <div class="ucla-progress__info">
        <label for="progress-color-gold" class="ucla-progress__label">UCLA Gold</label>
        <div class="ucla-progress__percent">100%</div>
    </div>
    <progress class="ucla-progress__bar ucla-progress__bar--gold" id="progress-color-gold" max="100" value="70"></progress>
</div>

<!-- Light Blue Color -->
<div class="ucla-progress">
    <div class="ucla-progress__info">
        <label for="progress-color-light-blue" class="ucla-progress__label">Light Blue</label>
        <div class="ucla-progress__percent">100%</div>
    </div>
    <progress class="ucla-progress__bar ucla-progress__bar--light-blue" id="progress-color-light-blue" max="100" value="70"></progress>
</div>

<!-- UCLA Blue Color -->
<div class="ucla-progress">
    <div class="ucla-progress__info">
        <label for="progress-color-blue" class="ucla-progress__label">UCLA Blue</label>
        <div class="ucla-progress__percent">100%</div>
    </div>
    <progress class="ucla-progress__bar ucla-progress__bar--ucla-blue" id="progress-color-blue" max="100" value="70"></progress>
</div>