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__circular`	A modifying class applied to `.s-progress`, it changes the bar to be a percentage of a circle.
`.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__segmented`	A modifying class applied to `.s-progress` for a segmented progress bar
`.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

Section titled 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

Section titled 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

Section titled 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

Circular

Section titled Circular

In compact layouts, switching to a circular progress might be more appropriate. Our circular progress bar inherits the parent’s text color. You and your designer will need to choose an appropriate font color. You’ll also need to pass the --s-progress-value CSS variable a value percentage value in decimal form.

By default, the circular progress bars are 32px. These dimensions can be modified by adding t-shirt sizing classes to .s-progress__circular: .s-progress__sm, .s-progress__md, and .s-progress__lg

<div class="s-progress s-progress__circular" style="--s-progress-value: .75">
    <svg class="s-progress-bar" viewbox="0 0 32 32" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75">
        <circle cx="16" cy="16" r="14"></circle>
        <circle cx="16" cy="16" r="14"></circle>
    </svg>
</div>

Privileges

Section titled 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

Section titled 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

Segmented

Section titled Segmented

Stacks provides dividers to create segmented progress bars. The progess bar can be either independent of the dividers, or locked to them.

<div class="s-progress s-progress__segmented">
    <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" style="width: 75%;"></div>
    <ol class="s-progress--segments">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>

Stepped

Section titled 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

Sections

Progress bars