Stacks

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>

Brand

Info

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>

Access Review Queues

Trusted user

Protect questions

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>

Electorate

Civic Duty - 162/300

Proofreader - 16/100

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

Progress bars