A Progress Bar is used to depict the progress of any task which is being carried out. Progress Bars are generally used to show the download and upload status. In other words we can say that, Progress Bars can be used to depict the status of anything that is in progress.
- Create HTML structure for your progress bar:
The code below contains two “div” tag elements named “Progress_Status” and “myprogressbar”.
- Adding CSS:
The code below is used to set the width and the background color of the progress bar as well as the progress status in the bar.
Creating A Progress Bar with Label
To add a numeric label to indicate how far the user is in the process, an addition of a new element inside or outside the progress bar is required which will display the progress status.
To add a label, make the following changes in the above code in “myprogressbar” element.
Make the following changes in the Function “update” and “scene” to make the numeric label update along with the progress in the progress bar.