The Django progress components can be used to show a user how far along he/she is in a process. These Django progress bars are built with two HTML elements, some CSS to set the width, and a few attributes. Now keep reading some examples to see how Django Progress bars work.
Example
<div class= "progress-wrapper" >
<div class= "progress-info" >
<div class= "progress-label" >
<span> Task completed</span>
</div>
<div class= "progress-percentage" >
<span> 60%</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-default" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
<div class= "progress-wrapper" >
<div class= "progress-info" >
<div class= "progress-label" >
<span> Task completed</span>
</div>
<div class= "progress-percentage" >
<span> 60%</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-primary" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
<div class= "progress-wrapper" >
<div class= "progress-info" >
<div class= "progress-label" >
<span> Task completed</span>
</div>
<div class= "progress-percentage" >
<span> 60%</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-secondary" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
<div class= "progress-wrapper" >
<div class= "progress-info" >
<div class= "progress-label" >
<span> Task completed</span>
</div>
<div class= "progress-percentage" >
<span> 60%</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-info" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
<div class= "progress-wrapper" >
<div class= "progress-info" >
<div class= "progress-label" >
<span> Task completed</span>
</div>
<div class= "progress-percentage" >
<span> 60%</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-success" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
<div class= "progress-wrapper" >
<div class= "progress-info" >
<div class= "progress-label" >
<span> Task completed</span>
</div>
<div class= "progress-percentage" >
<span> 60%</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-danger" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
<div class= "progress-wrapper" >
<div class= "progress-info" >
<div class= "progress-label" >
<span> Task completed</span>
</div>
<div class= "progress-percentage" >
<span> 60%</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-warning" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>