Progress Bar Design: Examples and Open Source Code Snippets
Speed and efficiency are two major aspects of quality web and mobile interfaces. Extra time on page can be annoying and most people just want to get moving. This impatience can be abated with the use of progress bar elements on the frontend.
Users always hate excessive waiting. But it helps if there’s some sort of indicator for tracking progress.
I’ve already covered great tips for selectable menus and in this post I want to focus on progress bar interface patterns, both for data loading and progression steps like form inputs. I hope these trends can help designers and developers with their own progress bar design ideas.
The Goal of Progress Bars
Each progress bar whether on the web or in an app should be used to denote, well, progress. This could be steps in a form or loading time for backend processes.
As the CPU crunches numbers the user sits around twiddling their thumbs—or more realistically thinking how long until they should wait before moving on to something else.
Other progress bars can denote how far a user has moved from one step to another. This is extremely popular in shopping carts for eCommerce websites but also for user signup pages.
This example by Tri Nguyen is a brilliant example. Three simple steps along the progress bar that use icons to illustrate progress. The user knows exactly how much effort is required to complete the form, which they use to judge their actions accordingly.
But designers can be even more creative with progress indicators.
Consider this example from a product page designed by Danish Rehman. It tracks spending to denote total savings from deals/coupons.
This may not be an interactive progress bar, but it’s still a valuable indicator of data.
In-page progress bars might also reinforce data like in this design by Chris Linden. It focuses on total completion of certain tasks which help users understand what they still need to complete.
Goal-based progress bars are very important to the fabric of interface design. They aren’t always used but they do add real value when used properly.
Design For Clarity
In UI design a good rule of thumb is “show don’t tell”. This holds up in all artistic mediums like painting, comics, music and even written prose.
But for interfaces the rule should be applied a differently. You want to imply how far the user has moved since starting and how much they have left before finishing. This also applies to non-user loading bars, like if a site is loading something on the backend. A good asynchronous loading bar should fill up and disappear once all resources have been loaded.
Tony Folenta’s health tracker app is a great example of progress bars that fill up, even though this app is a health app which requires user input.
The psychology behind the idea is still the same since it uses visual aesthetics to show what’s happening, rather than arbitrary numbers and percentages(although these are visible too).
Another cool example is this text-based donation progress bar designed by Matthew Morek.
It uses numbers to indicate the steps along with text to explain what happens at each stage.
Personally I feel this interface could be improved with iconography to complement the text labels. But in its raw form the interface still works, and that’s all we can really ask.
Define A Visual Hierarchy
Sometimes ideas can be better expressed when laid out visually. This is often the case with UI design and it’s what makes the wireframing/prototyping stage of design so important.
Progress bars can indicate certain things based on how they’re used. For example this checkout page design created by Brendan Falkowski is a unique yet brilliant idea.
It follows a vertical design pattern guiding the user through each stage of the checkout. Once information is added this becomes part of the progress timeline.
The fact that it’s designed vertically is also rather unique. But it makes sense if the checkout process is limited to one page. This way users are given a constant reminder of where they are in the process and how much more info is required before completion.
But the same pattern can be applied visually to mobile apps too. For example Murat Mutlu’s design of a mobile checkout UI is both aesthetically pleasing and functionally fantastic.
Since mobile phones are more confined there’s a real need to keep everything close together. Visually this progress bar indicates when each step is complete so the user feels more at ease.
Moving back a step is still possible, albeit slightly more annoying on a mobile phone. This is where it makes sense to keep the progress bar horizontal across multiple pages.
Progress Bar Code Samples
I’ve compiled a small handful of free open source progress bars from CodePen.
Each pen is designed for a different style, some made just for fun and others for practice work. All codes are free to edit and copy for use in other projects. You can even improve the work already done on these if you have the time.
Multi-Step Form
Progress Bar Form
Simple Input
Responsive Progress Meter
Breadcrumb Pagination
Angular UI Progress Bar
Track Form
Bootstrap Progress Bar
Responsive Checkout Progress
Skill Progress Bars
Percentage Bar
And for more related dev content check out these posts:
Share on Facebook 
Share on Twitter 
