Progress Tracker

Components for visualising the progress of an activity.

Progress Tracker Pre Defined Status

Displays a progress tracker using a pre defined set of statuses.

Pre defined status list (for others, use the custom status):

Not Run
Pending
Waiting
Skipped
Running
Reverting
Complete
Failed

HTML

Pre defined status list (for others, use the custom status):
<ul>
    <li>Not Run</li>
    <li>Pending</li>
    <li>Waiting</li>
    <li>Skipped</li>
    <li>Running</li>
    <li>Reverting</li>
    <li>Complete</li>
    <li>Failed</li>
</ul>
<div class="t-content" ng-controller="ProgressTrackerExampleController as $ctrl" style="width: 200px;">
    <inv-progress-tracker items="$ctrl.processTrackerExample1"></inv-progress-tracker>
    <br>
    <inv-progress-tracker items="$ctrl.processTrackerExample2"></inv-progress-tracker>
    <br>
    <inv-progress-tracker items="$ctrl.processTrackerExample3"></inv-progress-tracker>
</div>

Progress Tracker Custom Status

Displays a progress tracker with a custom state

You can pass in a custom state with your own glyph and class. Create the custom status object with a "glyph" and "stateClass" key.

HTML

You can pass in a custom state with your own glyph and class. Create the custom status object with a "glyph" and "stateClass" key.
<br>
<br>
<div class="t-content" ng-controller="ProgressTrackerCustomExampleController as $ctrl" style="width: 200px;">
    <inv-progress-tracker items="$ctrl.processTrackerCustomExample"></inv-progress-tracker>
</div>

Progress Tracker Left Aligned

Displays a progress tracker with a icons on the left and status text on the right

HTML

<div class="t-content" ng-controller="ProgressTrackerLeftAlignedController as $ctrl" style="width: 200px;">
    <inv-progress-tracker 
        items="$ctrl.progressTrackerExample"
        left-align-status-icon="true">
    </inv-progress-tracker>
</div>