Pistachio the front end framework and pattern library for graze.com

contents:


    progress indicator

    Indicates progress along a set of steps.

    three discrete steps with no step count

    Up to three discrete progress steps are displayed at all times.

    Step 1

    Step 2

    Step 3

    <div class="progress text-center">
        <div class="progress__bar">
            <div class="progress__bar__fill" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33%" style="width: 33%;"></div>
        </div>
        <div class="progress__steps grid grid--bleed grid--justify-space-between">
            <p class="grid__col-auto progress__steps__step">Step 1</p>
            <p class="grid__col-auto progress__steps__step">Step 2</p>
            <p class="grid__col-auto progress__steps__step">Step 3</p>
        </div>
    </div>

    step count fall-back to support more than three discrete steps

    Any number of discrete steps greater than three are hidden and replaced with a step count at pre-set breakpoints. This only accounts for the number of steps and does not consider the length of each label.

    Step 1

    Step 2

    Step 3

    Step 4

    Step 5

    Step 2 of 5

    <div class="progress text-center">
        <div class="progress__bar">
            <div class="progress__bar__fill" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40%" style="width: 40%;"></div>
        </div>
        <div class="progress__steps grid grid--bleed grid--justify-space-between">
            <p class="grid__col-auto progress__steps__step">Step 1</p>
            <p class="grid__col-auto progress__steps__step">Step 2</p>
            <p class="grid__col-auto progress__steps__step">Step 3</p>
            <p class="grid__col-auto progress__steps__step">Step 4</p>
            <p class="grid__col-auto progress__steps__step">Step 5</p>
            <p class="grid__col-12 progress__steps__step-count">Step 2 of 5</p>
        </div>
    </div>

    step count only with no discrete steps

    By providing no discrete steps the step count will always be displayed at each breakpoint.

    Step 1 of 3

    <div class="progress text-center">
        <div class="progress__bar">
            <div class="progress__bar__fill" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33%" style="width: 33%;"></div>
        </div>
        <div class="progress__steps grid grid--bleed grid--justify-space-between">
            <p class="grid__col-12 progress__steps__step-count">Step 1 of 3</p>
        </div>
    </div>

    update progress on page load

    To change the progress indicator between pages set the width of the .progress__bar__fill element to your desired percentage. You should also update the aria-valuenow attribute for improved accessiblity. If you're using the .progress__step-count element then you should update the step number there too.

    update progress via JavaScript

    Changing the width of the .progress__bar__fill element via JavaScript will trigger an animation on the .progress__bar__fill element. You should also update the aria-valuenow attribute at the same time for improved accessiblity.