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:
LWCProgressIndicator.html
<template>
<div class="slds-theme_default">
<div class="slds-p-around_medium">
<lightning-progress-indicator type="path" current-step={selectedStep}>
<lightning-progress-step label="Step1" onstepfocus={selectStep1} value="Step1">
</lightning-progress-step>
<lightning-progress-step label="Step2" onstepfocus={selectStep2} value="Step2">
</lightning-progress-step>
<lightning-progress-step label="Step3" onstepfocus={selectStep3} value="Step3">
</lightning-progress-step>
<lightning-progress-step label="Step4" onstepfocus={selectStep4} value="Step4">
</lightning-progress-step>
</lightning-progress-indicator>
<div class="slds-m-vertical_medium">
<lightning-button label="Back" class="slds-m-left_x-small" onclick={handlePrev}></lightning-button>
<template if:false={isSelectStep4}>
<lightning-button variant="brand" class="slds-m-left_x-small" label="Next" onclick={handleNext}></lightning-button>
</template>
<template if:true={isSelectStep4}>
<lightning-button variant="brand" class="slds-m-left_x-small" label="Finish" onclick={handleFinish}></lightning-button>
</template>
</div>
</div>
</div>
</template>
LWCProgressIndicator.js
import { LightningElement, track } from 'lwc';
export default class LWCProgressIndicator extends LightningElement {
@track selectedStep = 'Step1';
handleNext() {
var getselectedStep = this.selectedStep;
if(getselectedStep === 'Step1'){
this.selectedStep = 'Step2';
}
else if(getselectedStep === 'Step2'){
this.selectedStep = 'Step3';
}
else if(getselectedStep === 'Step3'){
this.selectedStep = 'Step4';
}
}
handlePrev() {
var getselectedStep = this.selectedStep;
if(getselectedStep === 'Step2'){
this.selectedStep = 'Step1';
}
else if(getselectedStep === 'Step3'){
this.selectedStep = 'Step2';
}
else if(getselectedStep === 'Step4'){
this.selectedStep = 'Step3';
}
}
handleFinish() {
alert('Finished...');
this.selectedStep = 'Step1';
}
selectStep1() {
this.selectedStep = 'Step1';
}
selectStep2() {
this.selectedStep = 'Step2';
}
selectStep3() {
this.selectedStep = 'Step3';
}
selectStep4() {
this.selectedStep = 'Step4';
}
get isSelectStep4() {
return this.selectedStep === "Step4";
}
}
LWCProgressIndicator.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="LWCProgressIndicator">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output:
LWCProgressBar.html
<template>
<div class="slds-theme_default">
<div class="slds-p-around_medium">
<lightning-progress-bar value={progress}></lightning-progress-bar>
</div>
</div>
</template>
LWCProgressBar.js
import { LightningElement, track } from 'lwc';
export default class LWCProgressBar extends LightningElement {
@track progress = 0;
connectedCallback() {
this._interval = setInterval(() => {
this.progress = this.progress === 100 ? 0 : this.progress + 1;
}, 200);
}
}
LWCProgressBar.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="LWCProgressBar">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output:
Sample Code:
List<AuthSession> asList = [Select Id, UsersId, Users.Name, UserType, SourceIp, SessionType, SessionSecurityLevel, ParentId,
NumSecondsValid, LoginType, LastModifiedDate, CreatedDate From AuthSession];
System.debug('asList-' + asList);
LWCDemo.html
<template>
<div class="slds-text-heading_large slds-text-align_center">
{greeting}
</div>
</template>
LWCDemo.js
import { LightningElement, track } from 'lwc';
export default class LWCDemo extends LightningElement {
@track greeting;
connectedCallback() {
this.greeting = 'Hello World!';
}
}