4

I have a progress bar in my app where I want to display the amount done with a text overlay.

What I have is the text overlay begin centered in side the amount that is done so it looks like this

enter image description here

The problem is when the user hasnt done very much it looks like this (it should be 17/100, not 17/10 as is showed) but gets cut off

enter image description here

The other design alternative would be to always center the progress text, but then when the user is halfway done I going to run into the issue where part of the text is highlighted and part isnt which I think will look weird.

Should I make it so that even when the user has a small number complete to show more than the actual percent so they can see the whole number?

Or what are other design options

Improve this question
2
  • Is it a 1 to 100 bar always, or can the total number be something else than 100?
    – Anders
    Feb 3, 2021 at 11:53
  • @Anders it can be any number, typically less than 1000 but user selects goal
    – iqueqiorio
    Feb 3, 2021 at 21:22

2 Answers 2

Reset to default
9

You could try making the bar thinner. right now, the thick bar almost looks like a button, or some kind of slider control.

You can place the text just above. This way you don't have to worry about legibility, and you can add more descriptive text if you need to be descriptive or encouraging (such as describing the stages of a process).

enter image description here

Improve this answer
3

It may not be necessary to put the two figures inside the progress bar:

enter image description here

The double progress bar can show the progress plus the total to be achieved:

enter image description here

The info bubble over the progress bar:

enter image description here

Improve this answer

Your Answer

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

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