Animated Lightning Progress Bar Based on Input

Hi Folks,

Its all Lightning Now!

I was looking at Lightning Design System, it is the coolest, it struck my eye to Progress  Bar. So I thought to play around little bit with it.
Although, there are numerous other blogs available for the same, thought to share the same for beginners.

So lets get started...

Lightning Design System(LDS) has very good out of box classes and CSS written for us which we can directly consume in our code.

Lightning Progress Bar

Lets take input to complete the progress bar in percentage. Lets take this step by step:-

1. Below is the code for Component or app.
      I have added the code in app . you can add that code in a component also.

<aura:application extends="force:slds">
<!-- <AnkushTest:ProgressBarComponent />-->
           
    <aura:attribute name="value" type="Integer" default="0" />
    <aura:attribute name="inputVal" type="Integer" default="0" />
    <aura:attribute name="timeout" type="object" />
    <!-- ==============Using Lightning Progress bar tag  ==================   -->
    <div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" role="progressbar">
     <lightning:progressBar value="{!v.value}" />
    </div>
   
    <!-- ==============Using Lightning Design System ==================   --> 

    <div class="slds-m-around_small">
       
        <div class="slds-m-bottom_large">
            <label>Type the value : <ui:inputNumber  change="{!c.onChanged}" /></label>
        </div>
        <div>
            <div style="width:50%" class="slds-progress-bar slds-progress-bar_circular slds-progress-bar_large"
                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="{!v.value}" role="progressbar">
                <span class="slds-progress-bar__value" style="{! 'width:  ' + v.value + '%;'}">
                    <span class="slds-assistive-text">{!'Progressing Value : ' + v.value + '%'}</span>
                </span>
                <div class="slds-text-align--center"><ui:outputNumber value="{!v.value}"/>
                    <ui:outputNumber value="100"/>
                    </div>
            </div>
        </div>
    </div>
    
    
   <style>
     .slds-progress-bar__value{
         background: green !important;
        }
    </style>
</aura:application>

Step By Step Explnation:-

There are two ways you can make progress bar
   A. By Using <lightning:progressBar> tag: It is a standard tag which renders as a horizontal bar. It        has various attributes which you can find easily on <lightning:progressBar>
  B.  Another way is by using Progress Bar .


2. We need to take input from user to make it animated i.e we need to keep refreshing the component or app after every nth sec to make it animated. For the same I have added that code in Helper.js

({
    Onchange : function(cmp, ev) {
       
        var currentValue=cmp.get('v.value');
        var finalValue=cmp.get('v.inputVal');
        var increment=1;
        if (finalValue<currentValue) {
            increment=-1; // in case the value needs to decreased if the value entered was less thn the initial value
        }
      
        var timeout = window.setInterval($A.getCallback(function() { // calling the function every n seconds
           
                var value=cmp.get('v.value');
                value+=increment; // Incrementing the value till it reaches the input value
                if (value==finalValue) {
                    window.clearInterval(cmp.get('v.timeout'));
                    cmp.set('v.timeout', null);
                }
                cmp.set('v.value', value); // set the incremented value to component 
            
        }), 200);
        cmp.set('v.timeout', timeout);
        
    }
})

In above code, the if loop inside window.setinterval makes sure that till the input value is equal to desired value this refresh should happen. once it value is achieved then set clear your interval.

3. Controller code :-

({
    onChanged : function(component, event, helper) {
        helper.Onchange(component, event);
    }
})

Just try it out , it will be fun ..

In case you face any issue just drop me message or mail.

Cheers!!
Happy Coding !