# How to make a bar showing the "percentage" of a maximum

so Im making a game and I need a 'bar' to show how much time has passed in ms (dont worry about the time 'mechanics' I only work with the correct numbers). So lets say that the bar is 128px wide and that I want the timer (the time passed since start in ms) to be displayed within that bar properly, so that e.g. if the time passed is half way of the maximum, then the bar should be half full. Could anyone please tell me the formula because I cant remember/find it.

(btw. all variables needed are the curTime, maxTime and the progress of the bar/the max bar width)

• This is elementary maths... Commented Jan 7, 2016 at 23:08
– Anko
Commented Jan 7, 2016 at 23:49
• I know this is elementary math but at 11pm after a rough day I kinda didnt care. Commented Jan 8, 2016 at 7:33

You do it with math.

private static const int maxBarWidth = 128;

//...

float ratio = (float)curTime / maxTime;
float barProgressInPixels = ratio * maxBarWidth;


Unless you're looking at figuring out how to render this information to the screen.

• That's a ratio, though, which times 100 would be a percentage. Commented Jan 7, 2016 at 23:04
• I didnt really bother with what i said, I just couldnt remember it lol Commented Jan 8, 2016 at 7:28
• @CeesTimmerman While that is true, when creating a progress bar, you don't want to multiply it by 100 to get the numerical percentage. Commented Jan 8, 2016 at 14:57
• @CeesTimmerman Just as an FYI, I approved the edit, but I had originally used "percentage" as the variable name, not "ratio" so that the asker could not say, "Hey, where's the percentage?" Commented Jan 8, 2016 at 15:05
• @Draco18s Thanks. That's speculative and easily remedied by explaining that a percentage is just a ratio times 100 ("cent" in French). Commented Jan 8, 2016 at 15:35