Indigo Design System v1.0.0

Progress Bar Work In Progress

A progress bar can be used to show how far along a user is in a process:

<div class="indi-progress-bar">
    <ul class="indi-progress-bar__list">
        <li class="indi-progress-bar__item indi-progress-bar__item--is-complete">
            <a href="#" class="indi-progress-bar__label">
                <span class="indi-progress-bar__circle"></span>
                <span class="indi-progress-bar__text">Consolrtium Information</span>
            </a>
        </li>
        <li class="indi-progress-bar__item indi-progress-bar__item--is-incomplete">
            <a href="#" class="indi-progress-bar__label">
                <span class="indi-progress-bar__circle"></span>
                <span class="indi-progress-bar__text">Consortium Leader Information</span>
            </a>
        </li>
        <li class="indi-progress-bar__item indi-progress-bar__item--is-complete">
            <a href="#" class="indi-progress-bar__label">
                <span class="indi-progress-bar__circle"></span>
                <span class="indi-progress-bar__text">Contact Information</span>
            </a>
        </li>
        <li class="indi-progress-bar__item indi-progress-bar__item--is-complete">
            <a href="#" class="indi-progress-bar__label">
                <span class="indi-progress-bar__circle"></span>
                <span class="indi-progress-bar__text">HCP Eligibility Category</span>
            </a>
        </li>
        <li class="indi-progress-bar__item indi-progress-bar__item--is-current">
            <a href="#" class="indi-progress-bar__label">
                <span class="indi-progress-bar__circle"></span>
                <span class="indi-progress-bar__text">Supporting Documentation</span>
            </a>
        </li>
        <li class="indi-progress-bar__item ">
            <a href="#" class="indi-progress-bar__label">
                <span class="indi-progress-bar__circle"></span>
                <span class="indi-progress-bar__text">Signature</span>
            </a>
        </li>
    </ul>
</div>