DEV Community

Kyle
Kyle

Posted on

Faking progress πŸ“ˆ

When you need to tell a user approximately how long something will take, what function do you use to calculate the percentage completed? You could use a simple linear progress increase over the estimated time span of the process, but where's the fun in that? πŸ₯Έ

I propose the following asymptotic function for calculating progress completed, based on an approximate maximum process time:

c=1βˆ’10(βˆ’2.3tm) c = 1 - 10^{(\frac{-2.3t}{m})}

where tt is the amount of time that has elapsed since the process started and mm is the approximate maximum amount of time that the process should take. It should go without saying, but make sure that your elapsed time and maximum time are measured in the same units.

With this function, you end up with a nice smooth curve as the percentage completed approaches 1.

Graph of percent complete functions

A graph of percent complete functions for 5, 10, 20, and 30 max load times

You should be able to implement this very simply in any programming language. Then just call this function repeatedly with updated elapsed time in order to re-render the percentage displayed to the user.

Here are some code samples to make your life that much easier!

TypeScript

function percentComplete(elapsed: number, maxLoadTime: number) {
  return (1 - 10 ** ((-2.3 * elapsed) / maxLoadTime)) * 100;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript

function percentComplete(elapsed, maxLoadTime) {
  return (1 - 10 ** ((-2.3 * elapsed) / maxLoadTime)) * 100;
}
Enter fullscreen mode Exit fullscreen mode

Python

def percentComplete(elapsed, maxLoadTime):
    return (1 - 10 ** ((-2.3 * elapsed) / maxLoadTime)) * 100
Enter fullscreen mode Exit fullscreen mode

C#

private static double PercentComplete(double elapsed, double maxLoadTime)
{
    return (1 - Math.Pow(10, (-2.3 * elapsed / maxLoadTime)));
}
Enter fullscreen mode Exit fullscreen mode

And if you want to play around with the graphs and coefficient, check out Desmos!

Thanks for reading! πŸ‘‹
-Kyle

Top comments (0)