Progress Bars

A component that visually communicates the completion of a task or operation. It shows the task’s progress and remainder.

Classes and Parameters

These are the various classes and parameters used within progress bars.

Classes

Classes Description
.s-progress The parent class for all progress bars.
.s-progress--bar A child element of .s-progress. It shows the user's current progress to accomplishing a goal with a background color.
.s-progress--label A child element of .s-progress. It's used to describe what progress bar is tracking.
.s-progress__brand A modifying class applied to .s-progress, it changes the bar color from green to orange.
.s-progress__info A modifying class applied to .s-progress, it changes the bar color from green to blue.
.s-progress__privilege A modifying class applied to .s-progress, it changes the bar color from green to a lighter green (for legibility reasons).
.s-progress__badge A modifying class applied to .s-progress, it is applied when a badge progress bar is desired.
.s-progress__gold A modifying class applied to .s-progress__badge, it is used when a gold badge progress bar is desired.
.s-progress__silver A modifying class applied to .s-progress__badge, it is used when a silver badge progress bar is desired.
.s-progress__bronze A modifying class applied to .s-progress__badge, it is used when a bronze badge progress bar is desired.

Parameters

Parameter Description
role="progressbar" Applied to .s-progress--bar, this parameter communicates that element is displaying progress status that takes a long time or consists of several steps. (Source)
aria-valuemin Applied to .s-progress--bar, this parameter defines the minimum allowed value for the progress bar. (Source)
aria-valuemax Applied to .s-progress--bar, this parameter defines the maximum allowed value for the progress bar. (Source)
aria-valuenow Applied to .s-progress--bar, this parameter defines the current value for the progress bar. (Source)
style="width: [value]%" Applied to .s-progress--bar, this is the aria-valuenow value displayed as a percentage.

Base Style

Since most progress bars are used to show successful completion of a task, the default fill color is green.

1
2
3
<div class="s-progress">
    <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" style="width: 33%"></div>
</div>

Fill Alternates

In addition to the standard progress bar, there is also a brand (orange) and info (blue) progress bar color variation.

1
2
3
4
5
6
7
8
9
<!-- Brand -->
<div class="s-progress s-progress__brand" id="brandprogress">
    <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" style="width: 33%"></div>
</div>

<!-- Info -->
<div class="s-progress s-progress__info" id="infoprogress">
    <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="66" style="width: 66%"></div>
</div>

Privileges

Taller progress bars used within Profiles to help users understand how close they are to achieving their next privilege.

1
2
3
4
5
6
7
<div class="s-progress s-progress__privilege">
    <label class="grid gs4 gsx grid__center m0 s-progress--label" for="badgegold-progress">
        @Svg.PromoteDemote.With("grid--cell")
        <div class="grid--cell">Access Review Queues</div>
    </label>
    <div class="s-progress--bar" id="badgegold-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" style="width: 25%;"></div>
</div>

Badges

Taller progress bars used within Profiles to help users understand how close they are to achieving their next gold, silver, or bonze badge.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- Gold Badge -->
<div class="s-progress s-progress__badge s-progress__gold">
    <label class="grid gs4 gsx m0 s-progress--label" for="badgegold-progress">
        <img class="grid--cell s-badge--image" src="BadgeGold.svg" aria-hidden="true">
        <div class="grid grid__center fl1 s-badge--label">Electorate</div>
    </label>
    <div class="s-progress--bar" id="badgegold-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" style="width: 25%;"></div>
</div>
<!-- Silver Badge -->
<div class="s-progress s-progress__badge s-progress__silver">
    <label class="grid gs4 gsx m0 s-progress--label" for="badgesilver-progress">
        <img class="grid--cell s-badge--image" src="BadgeSilver.svg" aria-hidden="true">
        <div class="grid grid__center fl1 s-badge--label">Civic Duty - 162/300</div>
    </label>
    <div class="s-progress--bar" id="badgegold-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" style="width: 50%;"></div>
</div>
<!-- Bronze Badge -->
<div class="s-progress s-progress__badge s-progress__bronze">
    <label class="grid gs4 gsx m0 s-progress--label" for="badgebronze-progress">
        <img class="grid--cell s-badge--image" src="BadgeBronze.svg" aria-hidden="true">
        <div class="grid grid__center fl1 s-badge--label">Proofreader - 16/100</div>
    </label>
    <div class="s-progress--bar" id="badgegold-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" style="width: 75%;"></div>
</div>