Lightning Component:

<aura:component>
    <!--declare handler for render the JS method for Progress bar-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <!--declare attributes for progress bar value-->
    <aura:attribute name="progress" type="Integer" default="0"/>
    <div class="slds-m-around_xx-large">
        <div class="slds-progress-bar slds-progress-bar_large" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{!v.progress}" role="progressbar">
            <span aura:id="prgBar" class="slds-progress-bar__value" style="{!'width:'+v.progress+'%'}">
                <span class="slds-assistive-text">Progress: {!v.progress}%</span>
            </span>
        </div>
    </div>
</aura:component>

Lightning JS Controller:

({
    //Specifying progress === 100 ? clearInterval(interval) : progress + 5 increases
    //the progress value by 5% and stops the animation when the progress reaches 100%
    //The progress bar is updated every 1000 milliseconds.
    doInit:  function (component, event, helper) {
        var interval = setInterval($A.getCallback(function () {
            var progress = component.get('v.progress');
            var prgBar = component.find("prgBar");
            if(progress >= 0){
                $A.util.addClass(prgBar,'slds-is-low');
            }
            if(progress >= 25){
                $A.util.removeClass(prgBar,'slds-is-low');
                $A.util.addClass(prgBar,'slds-is-medium');
            }
            if(progress >= 50){
                $A.util.removeClass(prgBar,'slds-is-medium');
                $A.util.addClass(prgBar,'slds-is-high');
            }
            if(progress >= 75){
                $A.util.removeClass(prgBar,'slds-is-high');
                $A.util.addClass(prgBar,'slds-is-critical');
            }
            component.set('v.progress', progress === 100 ? clearInterval(interval) : progress + 5);
        }), 1000);
    }
})

Lightning Style:

.THIS .slds-is-low {
    background-color: green!important;
}
.THIS .slds-is-medium{
    background-color: yellow!important;
}
.THIS .slds-is-high{
    background-color: orange!important;
}
.THIS .slds-is-critical{
    background-color: red!important;
}

Output: