Create a component class as below under Develop  -> Visualforce Components

<apex:component controller="GW_CTRL_BatchJobsProgress" selfClosing="true">

   <apex:attribute name="numberOfJobs" type="Integer" assignTo="{!numberOfJobs}" description="The number of batch jobs to display in the table."/>
    <apex:attribute name="batchComponentLabel" type="String" assignTo="{!batchComponentLabel}" description="The label of the progress bar section."/>
 
    <!-- Here is the css styles that will be used for the progress bars -->
    <style>
        .progressBar{
            background-color: #f8f8f8;
            border:1px solid #DDDDDD;
            height: 19px;
            width: 300px;
            -moz-border-radius: 5px; 
            -webkit-border-radius: 5px;
        }
        .progress{
            background-color: #F7B64B;
            border:1px solid #E78F08;
            height: 100%;
            margin: -1px;
            text-align: center;
            -moz-border-radius: 5px; 
            -webkit-border-radius: 5px;
            line-height: 18px;
        }
    </style>
 
    <!-- This action poller will check the status of the batch jobs every 5 seconds -->
    <apex:actionPoller rerender="jobs" interval="5" />
 
    <apex:pageBlock title="{!batchComponentLabel}">
        <apex:pageBlockTable value="{!batchJobs}" var="b" id="jobs">
            <apex:column headerValue="Apex Class" value="{!b.job.ApexClass.Name}"/>
            <apex:column value="{!b.job.CreatedDate}"/>
            <apex:column value="{!b.job.CreatedById}"/>
            <apex:column value="{!b.job.Status}"/>
            <apex:column value="{!b.job.TotalJobItems}"/> 
            <apex:column value="{!b.job.JobItemsProcessed}"/>
            <apex:column value="{!b.job.NumberOfErrors}"/> 
            <apex:column width="320px" >
 
                <!-- Here with have two divs that construct our progresses bar. An outer which is the entire bar,
                and and inner that represents the percent complete. We simply pass the percentComplete value to
                the inner div width and this will show how far along the job is. Brilliant! -->
 
                <div class="progressBar">
                    <div class="progress" style="width: {!b.percentComplete}%;">
                        {!b.percentComplete}%
                    </div>
                </div>
 
            </apex:column>
            <apex:column value="{!b.job.CompletedDate}"/>
        </apex:pageBlockTable>
    </apex:pageBlock>
 
</apex:component>

The corresponding controller code for GW_CTRL_BatchJobsProgress​ will be as below

global class GW_CTRL_BatchJobsProgress {
 
    private List<BatchJob> batchJobs;
    
	/*******************************************************************************************************
    * @description number of batch jobs the control will monitor
	*/ 	
    global Integer numberOfJobs {get; set;}

	/*******************************************************************************************************
    * @description label to display at the top of the progress meter
	*/ 	
    global String batchComponentLabel {get; set;}
 
	/*******************************************************************************************************
    * @description query for the current batch job progress
	*/ 	
    global List<BatchJob> getBatchJobs() {
        //Create new list of BatchJobs, a wrapper class that includes the job and percent complete.
        batchJobs = new List<BatchJob>();
 
        //If number of jobs was not defined, default to 20
        if(numberOfJobs== null || numberofJobs <= 0) {
            numberofJobs = 20;
        }
        
        if(batchComponentLabel== null) {
            batchComponentLabel = 'Batch Apex Jobs';
        }
 
        //Query the Batch apex jobs
        for(AsyncApexJob a : [select TotalJobItems, Status, NumberOfErrors, MethodName, JobType, JobItemsProcessed, Id, 
        							CreatedDate, CreatedById, CompletedDate, ApexClassId, ApexClass.Name 
        							From AsyncApexJob order by CreatedDate desc limit :numberOfJobs]) {
            Double itemsProcessed = a.JobItemsProcessed;
            Double totalItems = a.TotalJobItems;
 
            BatchJob j = new BatchJob();
            j.job = a;
 
            //Determine the pecent complete based on the number of batches complete
            if(a.status == 'Completed') {
            	j.percentComplete = 100;
            //Determine the pecent complete based on the number of batches complete
            } else if (totalItems == 0) {
                //A little check here as we don't want to divide by 0.
                j.percentComplete = 0;
            } else {
                j.percentComplete = ((itemsProcessed  / totalItems) * 100.0).intValue();
            }
 
            batchJobs.add(j);
        }
        return batchJobs;
    }
 
    
	/*******************************************************************************************************
    * @description wrapper class includes the job itself and a value for the percent complete
	*/ 	
    global Class BatchJob{
        global AsyncApexJob job {get; set;}
        global Integer percentComplete {get; set;}
    }
    
}

Finally on the visualforce page where you want to display the Batch Jobs Progress incude the below snippet
 

<c:batchJobs batchComponentLabel="Batch Progress" numberOfJobs="10" />

Kindly accept the answer if its working so that others landing on this page might take help from the same. If facing any issue please let me know. Thanks