Progress Bars are UI elements used to visually indicate the progress of a task or operation flow. It shows the degree of task completed and the remaining amount yet to be completed.
Determinate progress bars are used in the context of quantifiable activities, and they show how much the operation has been completed and how long it will be fully completed. Use this type of progress bar whenever possible to communicate the status of an action. This way, users will know that the platform is still working and their action is in progress.
Indeterminate progress bars are used when it is not possible to measure the time it takes to complete an operation. This type of progress bar does not give users any indication of an ongoing activity, and watching the bar for too long might lead them to leave the platform. When enough data is available, subtly switching to a determinate progress bar is recommended.
The content of the progress should describe the operation that is being performed.
The label is optional in the progress bars design – especially in indeterminate progress bars. But it might be necessary when dealing with multiple steps. Keep the content short, clear, and concise. Don’t give too much information and use it with no period.
The status shows the progress and how much it is until the action is completed. It is also optional in progress bars – especially when it is not possible to determine how long it will take to finish a certain operation. This is especially the case for indeterminate progress bars.
When dealing with multiple operations within a flow, combine all related steps into just one progress bar. Try not to “rewind” the bar every time a step has been completed because users might lose confidence in its accuracy if the bar moves backward.
For example, when “uploading” and “verifying” files in the file upload process, make sure to show only one primary progress bar with the entire process. You can add another progress bar but change the status text when finished and move the initial progress bar forward simultaneously and continuously.
A progress bar can be presented within a new panel, within a notification, or under the user interface element that triggers the task. In some cases, it may also substitute the initial user interface, provided that it can return to its original state when the operation is completed or cancelled.
Allow users to pause or cancel by adding a ‘Close’ button in the right corner. Make sure that the button is aligned with the progress bar label.
Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find progress bars and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!
So, get your uinkits package and start designing now!
