A progress bar is a linear indicator for providing feedback about an ongoing, user-initiated process.

Progress bars consist of an HTML5 progress element inside the block-level element with the .progress classname. The block-level container is necessary due to cross-browser constraints with styling HTML5 progress elements. As browsers improve, the intent is for this container to go away.

Progress Bar

Labeled

0%

Fade Out


<h4>Progress Bar</h4>
<div class="progress demo">
    <progress max="100" value="0" data-displayval="0%"></progress>
</div>

<h4>Labeled</h4>
<div class="progress labeled">
    <progress max="100" value="0" data-displayval="0%"></progress>
    <span></span>
</div>

<h4>Fade Out</h4>
<div class="progress progress-fade">
    <progress max="100" value="0" data-displayval="0%"></progress>
</div>

Indeterminate (Looping) Progress Bars

When the amount of time a task will take is not known, use an indeterminate (or looping) progress bar. These progress bars feature a recurring animation that continues until the task is complete and the progress bar is no longer needed.

Indeterminate/Looping


<div class="progress loop"><progress></progress></div>

Color

The default color of the fill bar is Action Blue. You can change the color as follows:

  • Green for success
  • Red to indicate danger or warning

Normal

Success

Danger/Warning


<h4>Normal</h4>
<div class="progress">
    <progress max="100" value="0" data-displayval="0%"></progress>
</div>

<h4>Success</h4>
<div class="progress success">
    <progress max="100" value="0" data-displayval="0%"></progress>
</div>

<h4>Danger/Warning</h4>
<div class="progress danger">
    <progress max="100" value="0" data-displayval="0%"></progress>
</div>

Animation

Progress bars have options for animation.

  • Use fade animation when you want the progress bar to disappear with a fade.
  • Use flash animation to draw the user’s attention when the process has completed.

Fade Out

Flash Then Fade

Flash Red, No Fade

Labeled With Success Flash And Fade

0%


<h4>Fade Out</h4>
<div class="progress progress-fade">
    <progress max="100" value="0" data-displayval="0%"></progress>
</div>

<h4>Flash Then Fade</h4>
<div class="progress flash progress-fade">
    <progress max="100" value="0" data-displayval="0%"></progress>
</div>

<h4>Flash Red, No Fade</h4>
<div class="progress flash-danger">
    <progress max="100" value="0" data-displayval="0%"></progress>
</div>

<h4>Labeled With Success Flash And Fade</h4>
<div class="progress flash progress-fade labeled">
    <progress max="100" value="0" data-displayval="0%"></progress>
</div>

Variations

The animation, color, and type of a progress bar can be changed by adding or removing CSS classes from the following list of class names.

  • labeled: A progress container with the labeled classname will show the percent complete as a numerical percentage to the far right of the progress bar. Note that this requires a <span> element be placed within the container after the <progress>. You will also need to update the contents of the span programmatically.
  • progress-fade: A progress container with the progress-fade classname will fade out after it reaches 100%.
  • flash: A progress container with the flash classname will have the bar color change to green after it reaches 100%. This can be combined with the progress-fade classname to have the bar change color to green and then fade out.
  • flash-danger: A progress container with the flash-danger classname will have the bar color change to red after it reaches 100%. This classname can also be combined with the progress-fade classname.
  • loop: A progress container with the loop classname will show a progress bar that loops across infinitely. This is the style for our indeterminate progress bar.
  • danger: A progress container with the danger classname will show up as red.
  • warning: A progress container with the warning classname will also show up as red.
  • success: A progress container with the success classname will show up as green.

Progress Bar in Cards

Card title

Here is a progress bar at the very top of a card, above the header.

Card title

Here is a progress bar at the top of a card's footer, above the buttons.


<div class="clr-row">
    <div class="clr-col-12 clr-col-sm-4">
        <div class="card">
            <div class="card-block">
                <div class="progress top">
                    <progress value="..." max="100"></progress>
                </div>
                <h4 class="card-title">Card title</h4>
                <p class="card-text">...</p>
            </div>
            <div class="card-footer">
                <a href="..." class="card-link">Click</a>
            </div>
        </div>
    </div>
    <div class="clr-col-12 clr-col-sm-4">
        <div class="card">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">...</p>
            </div>
            <div class="card-footer">
                <div class="progress">
                    <progress value="..." max="100"></progress>
                </div>
                <a href="..." class="card-link">Click</a>
            </div>
        </div>
    </div>
</div>

Static Progress Bar in Cards

Card title

Here is a progress bar at the very top of a card, above the header.

Card title

Here is a progress bar at the top of a card's footer, above the buttons.


<div class="clr-row">
<div class="clr-col-12 clr-col-sm-4">
        <div class="card">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">...</p>
            </div>
            <div class="card-footer">
                <div class="progress-static top">
                    <div class="progress-meter" data-value="33"></div>
                </div>
                <a href="..." class="card-link">Click</a>
            </div>
        </div>
    </div>
    <div class="clr-col-12 clr-col-sm-4">
        <div class="card">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">...</p>
            </div>
            <div class="card-footer">
                <div class="progress-static">
                    <div class="progress-meter" data-value="77"></div>
                </div>
                <a href="..." class="card-link">Click</a>
            </div>
        </div>
    </div>
</div>

Progress Bar in Sidebar Navigation


<ul class="sidenav">
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
        <div class="progress loop"><progress></progress></div>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Another link</a>
    </li>
</ul>

Static Progress Bars

Some applications use progress bars inside other widgets that re-render repeatedly in the DOM. While this is not a pattern that Clarity promotes, we have implemented a “static” progress bar to assist in these uses.

A normal progress bar will animate from its starting point to the defined ending point. When widgets that contain progress bars are re-rendered in the DOM, this results in Clarity’s progress bars continually growing from zero to the defined value.

A static progress bar just shows the defined value. It does not animate and lend itself to these sorts of DOM refreshes.

Because there was no way to turn off the animation in IE/Edge’s implementation of the HTML5 progress element, there is a related, though separate, component for static progress bars.

Static Progress Bar

Labeled, Static Progress Bar

37%

Red Static Progress Bar

Green Static Progress Bar


<h4>Static Progress Bar</h4>
<div class="progress-static">
    <div class="progress-meter" data-value="16"></div>
</div>

<h4>Labeled, Static Progress Bar</h4>
<div class="progress-static labeled">
    <div class="progress-meter" data-value="87" data-displayval="87%"></div>
    <span>87%</span>
</div>

<h4>Red Static Progress Bar</h4>
<div class="progress-static danger">
    <div class="progress-meter" data-value="8"></div>
</div>

<h4>Green Static Progress Bar</h4>
<div class="progress-static success">
    <div class="progress-meter" data-value="80"></div>
</div>
  • Instead of a .progress container div, the static progress bar has a .progress-static container div.
  • Instead of a progress element inside the container, there is a div</codeAtom> with the class of .progress-meter applied to it.
  • A div cannot have a value attribute, so the .progress-meter element has data-value attribute. The completion value must be dynamically inserted in the data-value attribute.
  • The data-value attribute must contain an integer between 0 and 100.

Progress Bar Blocks and Groups

Progress bar blocks allow for label and span elements to be placed alongside the .progress and .progress-static element. The progress bar block is a wrapper element with the .progress-block classname applied to it.

Progress bar groups allow for vertical stacking of elements above and below the progress bar. To create a progress bar group, wrap the .progress and .progress-static element with a .progress-group element.

Inline Progress Bar

More text
Left
Right
Left
Right
More text

Labeled, Static Progress Bar

Left
Right
18%
Left
Right

Stacked Progress Bars

10%
18%
24%
10%
18%
24%


<h4>Inline Progress Bar</h4>
<div class="progress-block">
    <label>Simple Layout</label>
    <div class="progress">
        <progress value="..." max="100" data-displayval="...%"></progress>
    </div>
    <span>More text</span>
</div>

<div class="progress-block">
    <label>Complex Layout</label>
    <div class="progress-group">
        <div class="clr-row">
            <div class="clr-col-6">Left</div>
            <div class="clr-col-6 text-right">Right</div>
        </div>
        <div class="progress-static">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
        </div>
        <div class="clr-row">
            <div class="clr-col-6">Left</div>
            <div class="clr-col-6 text-right">Right</div>
        </div>
    </div>
    <span>More text</span>
</div>

<h4>Labeled, Static Progress Bar</h4>
<div class="progress-block">
    <label>Complex Layout</label>
    <div class="progress-group">
        <div class="clr-row">
            <div class="clr-col-6">Left</div>
            <div class="clr-col-6 text-right">Right</div>
        </div>
        <div class="progress-static labeled danger">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
            <span>...%</span>
        </div>
        <div class="clr-row">
            <div class="clr-col-6">Left</div>
            <div class="clr-col-6 text-right">Right</div>
        </div>
    </div>
</div>

<h4>Stacked Progress Bars</h4>
<div class="progress-block">
    <label>Stacked Layout</label>
    <div class="progress-group">
        <div class="progress-static labeled danger">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
            <span>...%</span>
        </div>
        <div class="progress-static labeled">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
            <span>...%</span>
        </div>
        <div class="progress-static labeled success">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
            <span>...%</span>
        </div>
    </div>
</div>

<div class="progress-block">
    <label>Stacked (but resized) Layout</label>
    <div class="progress-group" style="font-size: 1px">
        <div class="progress-static danger">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
            <span>...%</span>
        </div>
        <div class="progress-static">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
            <span>...%</span>
        </div>
        <div class="progress-static success">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
            <span>...%</span>
        </div>
    </div>
</div>

Progress bar blocks are also available for use inside of Clarity cards.

Card title

Here is a progress bar at the very top of a card.


<div class="clr-row">
    <div class="clr-col-12 clr-col-sm-6">
        <div class="card">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Here is a progress bar at the very top of a card.</p>
                <div class="progress-block">
                    <label>Label</label>
                    <div class="progress-static">
                        <div class="progress-meter" data-value="..."></div>
                    </div>
                </div>
                <div class="progress-block">
                    <label>Longer Label</label>
                    <div class="progress-static">
                        <div class="progress-meter" data-value="..."></div>
                    </div>
                </div>
                <div class="progress-block">
                    <label>Really, Really, Really Long Label</label>
                    <div class="progress success">
                        <progress value="..." max="100" data-displayval="...%"></progress>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="progress-static top">
                    <div class="progress-meter" data-value="..."></div>
                </div>
                <a href="..." class="card-link">Click</a>
            </div>
        </div>
    </div>
</div>

Usage

Clarity has two types of progress bars:

  • A determinate progress bar, which shows process completion from 0 to 100%. Use this progress bar for a process of known duration.
  • An indeterminate progress bar, which animates continuously until the process is complete. Use this progress bar for a process for which there is no estimate of the end time.

Placement

Progress bars are designed for use in the main content area, header, cards, and modals. The size of the progress bar adjusts to its container. Indicate which process is being monitored through placement of the progress bar in the container.

Messaging

Use messaging as follows:

  • For a determinate progress bar, use a label to show percentage complete.
  • For an indeterminate progress indicator, add messaging to let the user know the operation is in progress, for example, “Working…,” or “Loading update 3 of 7.”
  • Keep the messaging minimal.

Clarity places the label on the right of the progress bar because the bar fills from left to right.

Progress Bar Versus Spinner

Clarity also has a circular progress indicator, called a spinner, which serves the same use case as an indeterminate progress bar. Using a spinner or an indeterminate progress bar is a matter of available space and activation point. In many cases, spinners are best because they occupy less space.