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:
However, how do I display excess usage once they have exceeded the limit?
I can think of 2 options:
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.