/* API Methods -
*
* @status - String - indicates the icon requested for the specified progress  
*/
    'none'     // 'none', '', or not specifying status are all acceptable to show no progress
    'progress' // shows the in progress icon
    'complete' // shows the progress complete icon
    'canceled' // shows the progress canceled icon
/*
* @light-theme - Boolean - existence of this property specifies to the component to show outline icons instead of filled icons 
*
*/

Default

Shows an indicator with a default status of open/not visited/no progress.

HTML

<div class="t-content">
    <inv-step-progress-indicator status="'none'"></inv-step-progress-indicator>
    <inv-step-progress-indicator status="'progress'"></inv-step-progress-indicator>
    <inv-step-progress-indicator status="'canceled'"></inv-step-progress-indicator>
    <inv-step-progress-indicator status="'complete'"></inv-step-progress-indicator>
</div>

Light Icons

Shows an indicator with inverse styling (light background colored borders)

HTML

<div class="t-content">
    <inv-step-progress-indicator status="'none'" light-theme="true"></inv-step-progress-indicator>
    <inv-step-progress-indicator status="'progress'" light-theme="true"></inv-step-progress-indicator>
    <inv-step-progress-indicator status="'canceled'" light-theme="true"></inv-step-progress-indicator>
    <inv-step-progress-indicator status="'complete'" light-theme="true"></inv-step-progress-indicator>
</div>