# 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... – gronostaj Jan 7 '16 at 23:08
• Also relevant: creating a circular loading bar – Anko Jan 7 '16 at 23:49
• I know this is elementary math but at 11pm after a rough day I kinda didnt care. – Ivan Jerza Jan 8 '16 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. – Cees Timmerman Jan 7 '16 at 23:04
• I didnt really bother with what i said, I just couldnt remember it lol – Ivan Jerza Jan 8 '16 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. – Draco18s no longer trusts SE Jan 8 '16 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?" – Draco18s no longer trusts SE Jan 8 '16 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). – Cees Timmerman Jan 8 '16 at 15:35