Faking progress 📈

Kyle — Tue, 01 Feb 2022 21:13:08 +0000

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:

10^{(\frac{-2.3t}{m})}

where $t$ is the amount of time that has elapsed since the process started and $m$ 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.

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;
}

JavaScript

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

Python

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

C#

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

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

Thanks for reading! 👋
-Kyle

DEV Community: Kyle

Faking progress 📈

TypeScript

JavaScript

Python

C#