How to implement Progress Bar in Visualforce Page

This post explains how to implement Progress bar on the Visualforce page using SLDS class.

This is Demo only you can extend this functionality based on your requirement.

Demo

Visualforce page

<apex:page controller="ProgressBarController" >
    <apex:slds />
    <apex:form id="frm">
        <apex:actionPoller action="{!checkStatus}" enabled="{!bProcess}" interval="5" reRender="frm" />
        
        <div class="slds-grid slds-gutters" style="margin-left:1%;">
            <div class="slds-col slds-size_1-of-3">
                <h1 style=" font-weight: bold;">
                    Progress Bar Demo in Visualforce Page
                </h1>
                <div style="display: block; margin-top:5%;" class="slds-progress-bar slds-progress-bar_circular" aria-valuemin="0" aria-valuemax="100"
                     aria-valuenow="{!deProgressBarWidth}" role="progressbar">
                    <span class="slds-progress-bar__value slds-progress-bar__value_success" style="width: {!deProgressBarWidth}%;">
                        <span class="slds-assistive-text">Progress: {!deProgressBarWidth}%</span>
                    </span>
                    <div class="slds-text-align--center slds-text-title" style="color:forestgreen;">
                        {!strStatus}
                    </div>
                </div>
            </div>
        </div>
    </apex:form>
</apex:page>

Apex Class

public class ProgressBarController {
    
    public Decimal deProgressBarWidth {get;set;}
    public Integer iCount {get;set;}
    public String strStatus {get;set;}
    public Boolean bProcess {get;set;}
    
    public ProgressBarController() {
        deProgressBarWidth = 0;
        strStatus = 'In Progress...';
        bProcess = true;
        iCount = 0;
    }
    
    public PageReference checkStatus() 
        // Caluclating Percentage value
        deProgressBarWidth = (iCount != 0 ? (Decimal.valueOf(iCount) > 100 ? 100 : Decimal.valueOf(iCount))/100 * 100 : 0);
        if(iCount >= 100) {
            strStatus = 'Completed';
            bProcess = false;
        }
        else {
            strStatus = 'Processing => ' + iCount + '/100';
        }  
        
        iCount += 45;
        return null;
    }
}

Output