I am working on a web app and would like to display the amount of transfer (bandwidth) that the user has used for that billing period.

They are given a certain amount of bandwidth per billing period. There is no hard limit on the bandwidth and the user simply pays for any extra bandwidth used.

One of the things I would like to do is to provide a progress bar to show the user how much they have used.

In cases where they have not exceeded the limit, it's a pretty easy case with just a simple progress bar:


download bmml source – Wireframes created with Balsamiq Mockups

However, how do I display excess usage once they have exceeded the limit?

I can think of 2 options:


download bmml source


download bmml source

With the first option, since the excess amount can extend horizontally infinitely, it can break the layout as horizontal space is limited.

With the second option, it is misleading as it feels like the excess amount is part of the 100%.

What are some other ways to display excess (more than 100%) in a progress-bar like widget?

Update Thanks to everyone for the great answers! Some things that I must apologize for not being more specific:

  • Excess usage isn't a "bad" thing.
  • The usage limits are on a monthly basis, so while Awesh's solution is nice, it isn't suitable here.

I have selected Aditya's answer as it suits our use-case the best. However, I must stress that all the other suggested solutions are also very good for this question if the constraints are a bit different.


7 Answers 7


I like the solution by @DesignerGuy which aim to give visual cue that something is wrong coupled with smaller textual footnote to describe the status.

Websites like Kickstarter takes similar approach when it comes to indicate funding progress vs goal.

One of the progress bar from Kickstarter

Regardless of your choice, IMHO progress bar is not the best way to accurately depict ongoing process without hard limit.

  • 3
    I agree that a progress bar is the wrong metaphor. Commented Aug 2, 2013 at 8:03

You can display vertical graph to display bandwidth limit with usage. you can have multiple vertical lines/graph for each billing cycle. display green graph till the acceptable limit and red graph to display excess data usage.

here is an example:

enter image description here

Android already take this approach, so here is an example.

Android example

  • Can you explain what it is that android did and why it is suitable to this situation. Just saying 'someone else did something and here's a screenshot' isn't really answering the question.
    – JonW
    Commented Aug 2, 2013 at 8:12
  • hi JonW, Thanks, as suggested, i have updated my answer.
    – Awesh
    Commented Aug 2, 2013 at 8:30
  • That's a better answer now, i've upvoted and I also added your original image back in as it's a useful example. There's no problem including screenshots within answers, providing your answer isn't only a screenshot (as this answer previously was).
    – JonW
    Commented Aug 2, 2013 at 8:33
  • What if their bandwidth limit changes? Commented Aug 2, 2013 at 19:36
  • bandwidth limit can be handled at the back-end or admin should be able to change this.
    – Awesh
    Commented Aug 5, 2013 at 6:56

If you use a progress bar, I would do it like this

Use color to communicate that they have exceeded their limit.


download bmml source – Wireframes created with Balsamiq Mockups

• Pro: Clearly communicates they are over their limit

• Con: Doesn't visually communicate the weight of how much they are over.

All in all, the main goal is to get their attention that something is wrong.

If you have more room for a detailed view, try a bar chart

@Awesh offered a good solution for a more detailed view. The nice part is that is more clearly shows how much they went over by. This is good if you are charging per X GB over.


download bmml source

  • 2
    This is exactly what @TylerWilliams suggested three hours before your answer! Commented Aug 2, 2013 at 7:46
  • 6
    But Tyler didn't do a pretty picture Commented Aug 2, 2013 at 8:01
  • 2
    I'd think anything pleasantly designed should work just as fine if the colors are stripped away, like a red light which relies on position as well... with this there's no visual difference between 99% and 999% if you can't tell it's red ^^ Commented Aug 2, 2013 at 9:32

I would suggest when the user goes over their alloted bandwidth that you fill the bar up completely and then change the color of the filling to red (which inherently indicates danger!). Next to this text, I would place the percentage of bandwidth used in bold (and red if you fancy) and then additionally add a (?) next to the percentage with the styling of a hyperlink. When the user clicks the hyperlink it should explain to them the situation. If nothing needs to be explained, feel free to ignore the last suggestion.


I think of "exploded progress bar" solution. The metaphor of "overload and breakthrough" is used.
enter image description here
The advantages are:

  • needs small amount of fixed extra-space
  • visually distinct even without colors
  • easy to implement (just static image)

Besides red color coding (which indicates danger) could be wrongly understood by users, like: are any punishment or sanctions would be applied to me when I am at red (prohibited) zone?


I'd put the excess number (in GB and/or $) to the left of the completely filled progress bar. There's no problem with the progress bar itself. That indicates how much of the pre-paid allotment is consumed. If it breaks out the right side, you're right that you can't continue the bar there, but it is the logical position to put the number.

If you put a reasonable header above this field, e.g. "Excess charges", you can even display the number 0 if the progress bar is still filling up.

/--------------------\ Excess charges
|====================|  2.1 GB
\--------------------/  $ 5.23

You could create a progress bar (or gauge) that has extra space at the end designated for excess values. In other words, 100% usage doesn't completely fill/empty the meter. As an example, here's how Cox presents Internet bandwidth usage to customers:

Data Usage Meter

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.