How to make lightning:progressIndicator read only?

Question

We have a data entry form and we are using lightning:progressIndicator as a way to show their progress. However, we don't want the user to click-ahead nor do we want them to click back on the progress indicator.

Is there a way to make the lightning:progressIndicator ready only, so that the component doesn't interact with any user input?

There's nothing in the documentation to support this, and I tried disabled="true" as well as readonly="true" but those did not do the trick.

Answer 1

Please Move your lightning:progressIndicator inside div tag as below,

<div class="slds-readonly-path">

    <lightning:progressIndicator aura:id="progress"
          currentStep="{!v.Stage}" type="path"/> 
       
</div>

CSS:

.THIS.slds-readonly-path{
    pointer-events: none;
}