Step Progress Bar

The step progress bar display progress of a step based procedure and displays the visited and active step in the progress.

HTML

<div class="t-content" style="width:1000px; height: 100px;" ng-controller="stepProgressBarExampleController">
    <inv-step-progress-bar steps="orderSteps" on-step-selected="stepClick1"></inv-step-progress-bar>
    <div style="display: flex; flex-direction: row; height: 30px; justify-content: flex-end; margin-top: 10px" >
        <button class="c-button" ng-click="back()">Back</button>
        <button class="c-button" ng-click="next()">Next</button>
    </div>
</div>

Step Progress Bar on step 3 of 4

The step progress bar display progress of a step based procedure and displays the visited and active step in the progress.

HTML

<div class="t-content" style="width:1000px; height: 100px;" ng-controller="stepProgressBarExampleController">
    <inv-step-progress-bar steps="offeringConfigSteps" on-step-selected="stepClick2"></inv-step-progress-bar>
</div>

Step Progress Bar all visited returned to step 3

The step progress bar display progress of a step based procedure and displays the visited and active step in the progress.

HTML

<div class="t-content" style="width:1000px; height: 100px;" ng-controller="stepProgressBarExampleController">
    <inv-step-progress-bar steps="orderStepsPrevious" on-step-selected="stepClick3"></inv-step-progress-bar>
</div>

Step Progress Bar all visited skipped 2 steps

The step progress bar display progress of a step based procedure and displays the visited, skipped and active steps in the progress.

HTML

<div class="t-content" style="width:1000px; height: 100px;" ng-controller="stepProgressBarExampleController">
    <inv-step-progress-bar steps="orderStepsSkipped" on-step-selected="stepClick4"></inv-step-progress-bar>
</div>

Step Progress Bar with unclickable visited steps

If you do not want the user to be able to click previously visited steps then don't pass in an `onStepSelected` binding.

HTML

<div class="t-content" style="width:1000px; height: 100px;" ng-controller="stepProgressBarExampleController">
    <inv-step-progress-bar steps="orderStepsSkipped"></inv-step-progress-bar>
</div>