Product Email Content Brand
/
Product Email Content Brand

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.
.s-progress__stepped A modifying class applied to .s-progress for a stepped progress bar
.s-progress--step A child of .s-progress__stepped that’s a wrapper for each individual step
.is-active A modifier .s-progress__step that adds visual styling to the active step.
.is-completed A modifier .s-progress__step that adds visual styling to a completed step.
.s-progress--stop A child of .s-progress__step, the circle that might contain a checkmark if the step’s been completed.
.s-progress--bar__left A modifier of .s-progress__bar that draws a line on the left side of a step.
.s-progress--bar__right A modifier of .s-progress__bar that draws a line on the right side of a step.

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.

<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.

<!-- 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.

<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.

<!-- 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>

Stepped

If your experience has a small number of discrete steps, it might be appropriate to use a stepped progress bar.

<div class="s-progress s-progress__stepped">
    <div class="s-progress--step is-complete">
        <a href="…" class="s-progress--stop">
            @Svg.CheckmarkSm
        </a>
        <div class="s-progress--bar s-progress--bar__right"></div>
        <a class="s-progress--label">…</a>
    </div>

    <div class="s-progress--step is-complete">
        <a href="…" class="s-progress--stop">
            @Svg.CheckmarkSm
        </a>
        <div class="s-progress--bar s-progress--bar__left"></div>
        <div class="s-progress--bar s-progress--bar__right"></div>
        <a class="s-progress--label">…</a>
    </div>

    <div class="s-progress--step is-active">
        <div class="s-progress--stop"></div>
        <div class="s-progress--bar s-progress--bar__left"></div>
        <div class="s-progress--bar s-progress--bar__right"></div>
        <div class="s-progress--label">…</div>
    </div>

    <div class="s-progress--step">
        <div class="s-progress--stop"></div>
        <div class="s-progress--bar s-progress--bar__left"></div>
        <div class="s-progress--label">…</div>
    </div>
</div>
Select plan
Team name
Payment
Create account