Stacks

Classes

Class	Parent	Modifies	Description
`.s-progress`	N/A	N/A	The parent class for all progress bars.
`.s-progress--bar`	`.s-progress`	N/A	Shows the user’s current progress to accomplishing a goal with a background color.
`.s-progress--label`	`.s-progress`	N/A	Used to describe what progress bar is tracking.
`.s-progress--bar__left`	`.s-progress--step`	N/A	Draws a line on the left side of a step.
`.s-progress--bar__right`	`.s-progress--step`	N/A	Draws a line on the right side of a step.
`.s-progress--step`	`.s-progress--stepped`	N/A	Wrapper for each individual step.
`.s-progress__badge`	N/A	`.s-progress`	Styles the progress bar as a badge.
`.s-progress__brand`	N/A	`.s-progress`	Applies the brand color to the progress bar.
`.s-progress__circular`	N/A	`.s-progress`	Styles the progress bar as a circular progress bar.
`.s-progress__info`	N/A	`.s-progress`	Applies the info color to the progress bar.
`.s-progress__privilege`	N/A	`.s-progress`	Used to display a privilege progress bar.
`.s-progress__segmented`	N/A	`.s-progress`	Styles the progress bar as a segmented progress bar.
`.s-progress__stepped`	N/A	`.s-progress`	Styles the progress bar as a stepped progress bar.
`.s-progress__gold`	N/A	`.s-progress__badge`	Styles the progress bar as a gold badge.
`.s-progress__silver`	N/A	`.s-progress__badge`	Styles the progress bar as a silver badge.
`.s-progress__bronze`	N/A	`.s-progress__badge`	Styles the progress bar as a bronze badge.
`.is-active`	N/A	`.s-progress--step`	Styles the active step.
`.is-completed`	N/A	`.s-progress--step`	Styles the completed step.

Parameters

Section titled Parameters

Parameter	Applies to	Description
`role="progressbar"`	`.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`	`.s-progress--bar`	This parameter defines the minimum allowed value for the progress bar. (Source)
`aria-valuemax`	`.s-progress--bar`	This parameter defines the maximum allowed value for the progress bar. (Source)
`aria-valuenow`	`.s-progress--bar`	This parameter defines the current value for the progress bar. (Source)
`style="width: [value]%"`	`.s-progress--bar`	This parameter sets the width of the progress bar as a percentage. The value 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>

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.

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

Progress bars

Classes

Parameters

Base style

Fill alternates

Circular

Privileges

Badges

Segmented

Stepped