I am working on a progress indicator aura component which accepts 2 parameters called total steps and completed steps. Based on that I am trying to display dotted progress indicator as below:

enter image description here

If total steps is given as 4 and completed steps as 2, we are displaying above.

<aura:application extends="force:slds" >  <br/> 
        <aura:attribute name="totalSteps" type="Integer" default="4"/>
        <aura:attribute name="completedSteps" type="Integer" default="2"/>
        <aura:attribute name="completedStepsPercent" type="Integer" />
        <aura:handler  name="init" value="{!this}" action="{!c.initialize}"/>      
        <div class="slds-progress" style="width:50%">
            <ol class="slds-progress__list">
                <li class="slds-progress__item slds-is-active">
                    <button class="slds-button slds-progress__marker"/>                
                <li class="slds-progress__item slds-is-active">
                    <button class="slds-button slds-progress__marker"/>                
                <li class="slds-progress__item">
                    <button class="slds-button slds-progress__marker"/>                
                <li class="slds-progress__item">
                    <button class="slds-button slds-progress__marker"/>                
            <div class="slds-progress-bar slds-progress-bar_x-medium" aria-valuemin="0" aria-valuemax="100" aria-valuenow="v.completedStepsPercent" role="progressbar">
                <span class="slds-progress-bar__value" style="{! 'width:  ' + v.completedStepsPercent + '%;'}"/> 


    initialize : function(component, event, helper) {
        var completedSteps = component.get("v.completedSteps")-1;
        var totalSteps = component.get("v.totalSteps")-1;
        var completedPercent = completedSteps/totalSteps*100;
        component.set("v.completedStepsPercent", completedPercent);

I am able to display the completed progress dynamically but stuck on how to display the number of items dynamically based on the total steps attribute. Any pointers on this is helpful.


The steps need to be dynamic, so you need an array attribute.

<aura:attribute name="steps" type="List" default="[]" access="private" />

The attributes should be reactive in addition to an init handler:

<aura:handler name="change" value="{!v.totalSteps}" action="{!c.update}" />
<aura:handler name="change" value="{!completedSteps}" action="{!c.update}" />
<aura:handler name="init" value="{!this}" action="{!c.update}" />

The update method just needs to update the attributes:

update: function(component, event, helper) {
  var total = component.get("v.totalSteps");
  var completed = component.get("v.completedSteps");
  var uncompleted = total - completed;
  var steps1 = [...Array(completed-1).keys()].map(() => 'slds-is-complete');
  var steps2 = [...Array(uncompleted).keys()].map(() => '');
  var allSteps = [...steps1, 'slds-is-active', ...steps2];
  component.set("v.steps", allSteps);
  // Other update logic here
  • @sfdxfox, sorry I didnt get that, can you please elaborate. Dont we need any changes to the existing aura component? I was trying to make this a reusable component and if we pass totalSteps and completedSteps, then display those number of slds-progress__item dynamically and displaying slds-progress__item active based on completedSteps(this part is currently working because of the last div in the code that I tried). Thanks.. – Suha Aug 6 '20 at 10:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.