Progress Bars: Examples, Best Practices, and How to Use

Want to see how close you are to achieving a goal? Progress bars may be your perfect solution. They’re a simple, universal tool for tracking how close you are to achieving a goal. Found in everything from software and dashboards to fitness apps, they give you a clear, immediate view of your progress.

In this guide, we’ll cover what progress bars are, when to use them, and the different types you’ll encounter. We’ll go over some design rules, examples, and how to build your own, while also touching on their limitations and answering some common questions. Ultimately, we want to help you use progress bars to create a clear and helpful experience for your users.

What is a progress bar?

A progress bar visually shows how much of a task is complete, usually as a horizontal bar that fills up as you move from 0 to 100 percent completion. Its main job is to give you a simple, direct way to see where you stand.

Progress bars fill up a defined space in proportion to a value, giving you an instant status update. For example, you can see how much of a file has downloaded or how many steps you’ve completed in a tutorial.

Progress bars are vital for visualizing data and designing user interfaces because they deliver immediate clarity without requiring extra thought. They offer a quick status check, turning abstract numbers into clear visuals that tell you exactly where you are. Use them to communicate progress and set expectations.

When and why to use a progress bar

Progress bars work best when you want to showcase progress toward a specific goal.

Here are some use cases for a progress bar:

• Goal-tracking: Visualize progress toward personal or professional goals, such as saving for a purchase or completing a training course.
• Project phases: Show how far along a project is, from start to finish.
• Onboarding steps: Guide new users through a setup process or software tutorial.
• Objectives and key results (OKRs): Track company or team performance against quarterly or annual targets.
• Fundraising campaigns: Display how much has been raised toward a financial goal.
• Health and fitness tracking: Monitor daily steps, calories burned, or water intake against a target.

The main benefit of progress bars is how easily everyone can interpret them. Their familiar design works well for broad audiences, and they can motivate people to complete tasks or strive toward a goal.

However, progress bars aren’t suitable for every situation. They don’t work well for complex processes with undefined totals or for comparing multiple categories. If the total value is unknown or changes, a progress bar can be misleading. In these cases, consider using bar charts or bullet charts instead.

How progress bars work

Progress bars work on a simple, proportional principle: The bar fills up in direct relation to how much progress has been made. This approach makes it easy to see how much progress has been completed toward a goal and how much remains.

Data requirements

Progress bars need basic data points to work, usually either:

• Current value and total value: This is the most straightforward approach. For example, if you’ve completed 80 out of a 100 tasks, the bar will be 80 percent full.
• Percentage complete: In many cases, the data is already available as a percentage. The chart simply visualizes this percentage directly.

Scale and representation

Most progress bars use a linear scale, where the filled portion directly matches the percentage complete. If a task is 50 percent done, the bar will be filled halfway.

Some progress bars are segmented to break progress into steps or phases, making them useful for multi-stage projects or milestones.

Static vs real time

Progress bars update in three main ways:

• Static: These are found in printed reports or static dashboards where the data is a snapshot in time. The bar shows progress as of a specific date.
• Real-tme: Common in digital dashboards and applications, these bars update automatically as new data becomes available. This provides a live look at progress.
• Interactive: In software or web applications, progress bars can be interactive. Users might hover over them to see more details in a tooltip or click on segments to get more information about a specific phase.

Optional markers

You can add extra clarity to a progress bar with features like goal lines, color changes at key thresholds, or milestone indicators (such as at 25, 50, and 75 percent). These markers provide context and make progress more tangible.

Types and variants of progress bars

The standard horizontal bar is the most common progress bar, but there are several other types, each suited for different needs and display spaces. The best choice depends on the data you want to show and your layout constraints.

Linear progress bar

This classic horizontal bar is the most widely recognized and straightforward type. It’s ideal for clearly showing progress in most layouts, especially when you have enough horizontal space.

Circular or radial progress bar

A circular progress bar displays progress around the edge of a circle. Common in mobile apps and smartwatch faces, they save space and clearly show a single percentage value, often placed in the center for quick reference.

Segmented progress bar

A segmented progress bar is divided into blocks, each representing a step, phase, or milestone. This format is ideal for visualizing multi-stage processes, such as onboarding flows or project phases, and gives people a way to see both overall progress and their current stage.

Multi-goal progress bar

To track multiple goals in a single bar, use a stacked progress bar with different colored segments for each component, such as design, development, and testing phases. This adds helpful detail without cluttering your dashboard with extra charts.

Animated progress bars

Animated progress bars, often used during software installations or downloads, show people that a process is active. Animation reassures them that the system is working, even when the exact completion time is unknown. These bars are key for maintaining engagement during indeterminate waits.

Design best practices and pitfalls

A well-designed progress bar quickly communicates information. To make your visualizations clear and effective, follow these best practices.

Do:

• Keep the scale clear: The bar should always represent a scale from 0 to 100 percent. Avoid manipulating the bar’s length to exaggerate progress.
• Use labels when possible: Adding a percentage or value label (like “75%” or “150/200”) provides precise information and reinforces the visual.
• Stick to simple colors: One main fill color against a neutral background is usually most effective. Use a color that is easy to see and aligns with your overall design aesthetic.
• Provide high contrast: The fill color must have sufficient contrast with the background of the bar so it’s clearly visible, even for people with visual impairments.
• Add milestone markers: For longer processes, visually marking key milestones, like 25 percent, 50 percent, and 75 percent, can provide helpful context and a sense of accomplishment.

Don’t:

• Use Ambiguous totals: A progress bar is only effective if the total (100 percent) is a meaningful and fixed number. If the total is subject to change, the visualization becomes unreliable.
• Leave Bars unlabeled: An unlabeled bar can be ambiguous. Is it showing progress, capacity, or something else? Always provide context.
• Create Visual clutter: Progress bars should be simple. Avoid adding unnecessary gradients, shadows, or decorations that distract from the data.
• Misrepresent progress: Never use a progress bar that starts at a value other than zero or doesn’t fill proportionally. This is a common “dark pattern” used to make processes seem faster than they are.

Examples and storytelling tips

Progress bars are valuable storytelling tools when used well. Here are concise examples and simple tips to make your progress visualizations more engaging and clear.

Example use cases

• Project milestone completion: A project management dashboard could use a segmented progress bar to show which phases are complete, in progress, or not yet started. This gives stakeholders a quick overview of the project’s health.
• Feature adoption or onboarding flow: A software company can track how many new users complete the onboarding tutorial. A segmented bar can show where they tend to drop off, providing valuable information for product improvement.
• Sales or fundraising progress: A sales team can visualize its progress toward a quarterly quota. For a nonprofit, a public facing progress bar on its website can encourage more donations by showing how close they are to their fundraising goal.
• Personal goals: An individual could use a progress bar to track their savings for a vacation or their progress in a reading challenge. Seeing the bar grow can be a powerful motivator.

Storytelling with progress bars

You can make your data more engaging by highlighting the “almost complete” stage, such as a bar at 90 percent, to create urgency and motivate a final push. This taps into the goal gradient effect, where people are more driven as they get closer to their target.

Color also plays a role. Shifting from red at low completion, to yellow near halfway, and green as you finish, instantly signals urgency and status, making the bar even easier to read at a glance.

How to create a progress bar

Creating a progress bar is a simple task in most modern spreadsheets and data visualization tools.

Data preparation

Make sure you organize your data with columns for the current value and total value, or a pre-calculated percentage complete.

Building in spreadsheets

You can create a progress bar in Excel or Google Sheets using conditional formatting.

1. Input your current value in one cell (e.g., A1) and your total value in another (e.g., B1).
2. In a third cell (e.g., C1), calculate the percentage by entering the formula, =A1/B1.
3. Select the cell with the percentage (C1) and apply conditional formatting. Choose the “Data Bars” option.
4. Customize the formatting to set the minimum value to 0 and the maximum to 1. Choose the color you want to fill the bar.

Building in BI tools

In BI tools, creating progress bars is straightforward. Most offer dedicated chart types or easy formatting options. Just add your measures, select a bar chart style, adjust the axis to run from 0 to 100 percent, and set your colors and labels for a clean, readable result.

Interactive dashboards make progress bars more dynamic, allowing animations as data updates, tooltips for details, and additional markers for goals or reference points.

Limitations and alternatives

Progress bars are useful, but they have limits. They aren’t designed to compare multiple categories or show data distributions. In cases where percentages hide important details or the total is unknown, consider using bar charts, bullet charts, or other visuals that better match your data.

Progress bars aren’t meant for comparing multiple categories. If you want to compare several values, such as sales performance across different reps, a standard bar chart is a better choice.

They also can’t display data distributions, a progress bar only tracks a single value toward a total, not how data points are spread out. For distributions, use a histogram or box plot instead.

If you want more detail than a simple percentage, a bullet chart is a strong alternative. Bullet charts show the main value alongside a target and performance ranges, making it easier to compare progress with clear context.

If the total value is unknown or keeps changing, a progress bar becomes unclear. In these situations, simply display the current value or use a visual that doesn’t suggest a fixed endpoint.

Wrapping up: Key insights for success with progress bars

Progress bars are essential for clear data visualization. The simple format makes it easy for anyone to quickly see progress toward a goal, while keeping them informed and motivated.

For best results, keep progress bars simple, clear, and well-labeled. Use them to highlight progress toward a defined goal and apply best practices from this guide to make your visualizations both informative and engaging.