Skip to main content
Sections

Progress bars

Razor

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

Classes and parameters

Section titled Classes and parameters

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

Classes

Section titled 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" aria-label="current progress" 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">
    <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-label="…" style="width: 33%"></div>
</div>

<!-- Info -->
<div class="s-progress s-progress__info">
    <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="66" aria-label="…" 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" role="progressbar" 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">
    <div class="s-progress--label" id="progress-label">
        @Svg.PromoteDemote
        Access Review Queues
    </div>
    <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" aria-labelledby="progress-label" 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">
    <div class="s-progress--label" id="…">
        <img class="s-badge--image" src="BadgeGold.svg" alt="gold badge">
        <div class="s-badge--label">Electorate</div>
    </div>
    <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" aria-labelledby="…" style="width: 25%;"></div>
</div>
<!-- Silver Badge -->
<div class="s-progress s-progress__badge s-progress__silver">
    <div class="s-progress--label" id="…">
        <img class="s-badge--image" src="BadgeSilver.svg" alt="silver badge">
        <div class="s-badge--label">Civic Duty - 162/300</div>
    </div>
    <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-labelledby="…" style="width: 50%;"></div>
</div>
<!-- Bronze Badge -->
<div class="s-progress s-progress__badge s-progress__bronze">
    <div class="s-progress--label" id="…">
        <img class="s-badge--image" src="BadgeBronze.svg" alt="bronze badge">
        <div class="s-badge--label">Proofreader - 16/100</div>
    </div>
    <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-labelledby="…" style="width: 75%;"></div>
</div>
gold badge
Electorate
silver badge
Civic Duty - 162/300
bronze badge
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.

Note: The segmented variant has been deprecated. A similar layout can be achieved with several .s-progress-bar elements in a container. 
<div class="s-progress s-progress__segmented">
    <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="…" 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
Edit on GitHub File an issue on GitHub
Deploys by Netlify