Progress Ring in Lightning Component Salesforce | Salesforce Tutorials

Kapil November 19, 2020

Displays a circular progress indicator to provide feedback about an action or process. This component requires API version 48.0 and later.

Controls which way the color flows from the top of the ring, either clockwise or counterclockwise

Valid values include fill and drain. The fill value corresponds to a color flow in the clockwise direction.

The drain value indicates a color flow in the counterclockwise direction.

The size of the progress ring. Valid values include medium and large.

The percentage value of the progress ring. The value must be a number from 0 to 100.

A value of 50 corresponds to a color fill of half the ring in a clockwise

or counterclockwise direction, depending on the direction attribute.

Changes the appearance of the progress ring.

Accepted variants include base, active-step, warning, expired, base-autocomplete. 


Component

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="ringValue" type="Double" />
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    <div style="background-color:white; padding:10px;">
        <aura:if isTrue='{!lessthan(v.ringValue, 10)}'>
            <lightning:progressRing value="{!v.ringValue}" size="large" variant="warning" />
            <aura:set attribute="else">
                <aura:if isTrue='{!v.ringValue == 100}'>
                    <lightning:progressRing value="{!v.ringValue}" size="large" variant="base-autocomplete" />
                    <aura:set attribute="else">
                        <lightning:progressRing value="{!v.ringValue}" size="large" />
                    </aura:set>
                </aura:if>
            </aura:set>
            
        </aura:if>
    </div>
</aura:component>


Controller

1
2
3
4
5
({
	doInit : function(component, event, helper) {
		component.set("v.ringValue",9);
	}
})

Checkout complete tutorial below :


 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Keep Coding 
Tags:

Post a Comment

0 Comments