Progress bar
A progress bar is a visual representation, of the progression of a task, that can take time for the website or the app to do.
Usage
A progress bar is used to give users information about a lengthy operation (with a known time) that the application is performing. It shows users the operation is continuing without problems, how much of the operation has been completed and how much of the operation is remaining.
When to use
Use it when you need to indicate to the user the progression of a tasks and show that the service is still working, that the loading time is not a bug. Use it when the loading could take longer than 2 seconds.
In addition to the progress bar, text labels, additional information about the progress and percentage of the task completed can also be included.
Progress bars are not interactive, so the user cannot click them. However, if you are informing users about a lengthy operation, it is important to give them the option to cancel: > 5 seconds (not bug , low band width)
Anatomy
Progress fill: Show to the user the loading status
Percentage indictor: Indicate in percentage the loading status
Wrapper: A fixed container which represents the whole of the process.
Placement
A progress bar will fill its wrapper over time to show what proportion of the time or amount has been completed and how much is left.
Do's & Don'ts
If the process could take time, you could a strip animation of the progress fill to indicate that the system is still working.
Describe the progress bar by indicating the progress by a proportion / percentage. These values must be updated as soon as the visual indicator of progress is updated.
The user should be able to cancel the action with a button.
Don't use progress bar to show the progress of a user.
Don't use a progress bar if the loading of the element is short. If you need to indicate a short loading, you could use a spinner component.