Help with a progress bar algorithm for a website

Question

I have a progress bar in a website that needs to be filled based on the number $50$. So at $50$ it will be $100\%$ full. The problem is that it starts at about $20\%$ then follows this pattern :

    for the number $5$ it should be $31\%$ full
    for the number $10$ it should be $52\%$ full
    for the number $25$ it should be $72\%$ full

Moreover, on the way from $5$ to $10$ it should move toward the $52\%$ mark from $31\%$ mark but only reach that number when we get to the required number $10$. The same goes for $52\%$ to $72\%$ and then from $25$ to $50$ it should slowly creep toward $100\%$ from $72\%$

I have tried using a bunch of if statements with different percentages and additions to get there, but nothing seems to be working. A single algorithm would be great!

Thanks!

Answer 1

If you want to have your progress bar grow linear between 5 and 10, 10 and 25, 25 and 50, then something like this would do it:

if 0<=number and number<5 then percentage=20 + number*11/5 
elseif 5<=number and number<10 then percentage = 10 + number*21/5
elseif 10<=number and number<25 then percentage = 116/3 + number*4/3
elseif 25<=number and number<=50 then percentage = 44 + number*28/25

(the formulas above for the calulation of the percentages can be found by solving a linear system)

Answer 2

You could try the following function:

$$ f(x) = \left\{ \begin{array}{ll} (11/5) x + 20 & 0 \leq x \leq 5,\\ (21/5)(x - 5) + 31 & 5 < x \leq 10,\\ (4/3)(x - 10) + 52 & 10 < x \leq 25,\\ (28/25)(x - 25) + 72 & 25 < x \leq 50 \end{array}\right. $$

You can partition the interval $[0,50]$ as $[0,5]\cup(5,10]\cup(10,25]\cup(25,50]$, where break points are at located at $5, 10, 25$, i.e., the points in which you are interested. On each interval you can then use a line to define your progress toward the next point. For example, on the interval $(5,10]$ we define the line between the points $(5,31)$ and $(10,52)$ using the slope-point formula $y = mx + b$. If you need values between $0$ and $1$ just divide each equation by $100$. Naturally, this approach can be generalized to any number of break points in your interval. Implementing this approach as an algorithm is just a matter of writing a few if-statements.