Standard Life Digital Framework

Interactive 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.

This interactive variant gives the user the option to click on upcoming or previous 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 3 JavaScript support classes are slb-complete and slb-active and slb-disabled
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
if the list item has a class of slb-active the slb-progress-active icon or number will be shown
if the list item has a calss of slb-disabled it won't be clickable, this is for the next steps that shouldn't be accessed before the active one is finished
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

Markup: progress-bar\progress-bar-interactive.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__list-item">
            <a class="slb-progress-bar__item slb-progress-bar__item--interactive slb-complete" href="#">
                <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>
            </a>
        </li>
        <li class="slb-progress-bar__list-item">
            <a class="slb-progress-bar__item slb-progress-bar__item--interactive slb-complete" href="#">
                <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>
            </a>
        </li>
        <li class="slb-progress-bar__list-item">
            <a class="slb-progress-bar__item slb-progress-bar__item--interactive slb-complete" href="#">
                <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>
            </a>
        </li>
        <li class="slb-progress-bar__list-item slb-disabled">
            <a class="slb-progress-bar__item slb-progress-bar__item--interactive slb-active" href="#">
                <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>
            </a>
        </li>
        <li class="slb-progress-bar__list-item slb-disabled">
            <a class="slb-progress-bar__item slb-progress-bar__item--interactive" href="#">
                <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>
            </a>
        </li>
        <li class="slb-progress-bar__list-item slb-disabled">
            <a class="slb-progress-bar__item slb-progress-bar__item--interactive" href="#">
                <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>
            </a>
        </li>
    </ol>
</div>

Source: components/_progress-bar.scss