Standard Life Digital Framework

Progress Bar

full screen new window example HTML markup

The progress bar gives a clear indication of progress and sets the context in regards to steps completed, current step, and upcoming steps.

Usage

Place the progress bar on a page where a user can visually see the progress journey.

The progress bar has 3 states, all of which are added to each list item. These states should be given the class names of slb-progress-default, slb-progress-complete and slb-progress-active

Each state can be either a span holding a number or an SVG holding an icon. Depending on what class the list item has will depend on which state is shown, for example:

The 2 JavaScript support classes are slb-complete and slb-active
by default the slb-progress-default icon or number will be shown.
if the list item has a class of slb-complete the slb-progress-complete icon or number will be shown
and if the list item has a class of slb-active the slb-progress-active icon or number will be shown.
Each state will remove the visibility of the other states

JavaScript Support

Modifier selector	Description
`slb-complete`	This class is added to each progress bar item that is currently in the complete state which will display the complete number or icon and the styling
`slb-active`	This class is added to the active progress bar item to display the active icon and styling

1
Account info
2
Payments in
3
Investment
4
Payments out
5
Advisor Change
6
Summary

Markup: progress-bar\progress-bar.hbs

Copy

<div class="slb-progress-bar">
    <div class="slb-progress-bar__track">
        <span id="slb-track-complete" class="slb-progress-bar__track-complete"></span>
    </div>
    <ol class="slb-progress-bar__list" data-current="4">
        <li class="slb-progress-bar__item slb-complete" >
            <span class="slb-progress-bar__item-number slb-progress-default">1</span>
            <svg class="slb-icon slb-progress-complete" viewBox="0 0 512 512" id="check-1"><title>check</title><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
            <svg class="slb-icon slb-progress-active" viewBox="0 0 512 512" id="pencil-alt-1"><title>pencil-alt</title><path d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h68v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"/></svg>
            <h6 class="slb-progress-bar__text"><span class="slb-progress-bar__text-span">Account info</span></h6>
        </li>
        <li class="slb-progress-bar__item slb-complete" >
            <span class="slb-progress-bar__item-number slb-progress-default">2</span>
            <svg class="slb-icon slb-progress-complete" viewBox="0 0 512 512" id="check-2"><title>check</title><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
            <svg class="slb-icon slb-progress-active" viewBox="0 0 512 512" id="pencil-alt-2"><title>pencil-alt</title><path d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h68v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"/></svg>
            <h6 class="slb-progress-bar__text"><span class="slb-progress-bar__text-span">Payments in</span></h6>
        </li>
        <li class="slb-progress-bar__item slb-complete" >
            <span class="slb-progress-bar__item-number slb-progress-default">3</span>
            <svg class="slb-icon slb-progress-complete" viewBox="0 0 512 512" id="check-3"><title>check</title><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
            <svg class="slb-icon slb-progress-active" viewBox="0 0 512 512" id="pencil-alt-3"><title>pencil-alt</title><path d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h68v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"/></svg>
            <h6 class="slb-progress-bar__text"><span class="slb-progress-bar__text-span">Investment</span></h6>
        </li>
        <li class="slb-progress-bar__item slb-active" >
            <span class="slb-progress-bar__item-number slb-progress-default">4</span>
            <svg class="slb-icon slb-progress-complete" viewBox="0 0 512 512" id="check-4"><title>check</title><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
            <svg class="slb-icon slb-progress-active" viewBox="0 0 512 512" id="pencil-alt-4"><title>pencil-alt</title><path d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h68v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"/></svg>
            <h6 class="slb-progress-bar__text"><span class="slb-progress-bar__text-span">Payments out</span></h6>
        </li>
        <li class="slb-progress-bar__item" >
            <span class="slb-progress-bar__item-number slb-progress-default">5</span>
            <svg class="slb-icon slb-progress-complete" viewBox="0 0 512 512" id="check-5"><title>check</title><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
            <svg class="slb-icon slb-progress-active" viewBox="0 0 512 512" id="pencil-alt-5"><title>pencil-alt</title><path d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h68v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"/></svg>
            <h6 class="slb-progress-bar__text"><span class="slb-progress-bar__text-span">Advisor Change</span></h6>
        </li>
        <li class="slb-progress-bar__item" >
            <span class="slb-progress-bar__item-number slb-progress-default">6</span>
            <svg class="slb-icon slb-progress-complete" viewBox="0 0 512 512" id="check-6"><title>check</title><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
            <svg class="slb-icon slb-progress-active" viewBox="0 0 512 512" id="pencil-alt-6"><title>pencil-alt</title><path d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h68v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"/></svg>
            <h6 class="slb-progress-bar__text"><span class="slb-progress-bar__text-span">Summary</span></h6>
        </li>
    </ol>
</div>

Source: components/_progress-bar.scss