Progress Bars - Computerphile

Progress bars, what are they and how do they work? Dr Valerio Giuffrida explains and goes through an implementation of a progress bar.
/ computerphile
/ computer_phile
This video was filmed and edited by Sean Riley.
Computer Science at the University of Nottingham: bit.ly/nottscomputer
Computerphile is a sister project to Brady Haran's Numberphile. More at www.bradyharanblog.com
Thank you to Jane Street for their support of this channel. Learn more: www.janestreet.com

[@smylesg]

The worst progress bars are the ones that shoot up to 90% almost immediately and then hang around there for five minutes.

[@CallousCoder]

Completely in accordance with engineering. Getting to 90% is done in 10% of the time the last 10% take 90% of the time. 😂 And this is true for every engineering challenging 😊

[@fizixx]

Or, the ones that finally reach 100% and still are not done. If they're not done, then it's less than 100%, they are done when they reach 100%. ugh

[@PH4RX]

But think about the underlying problem: The easiest way is to check for things done out of total things, right? So you simply take your bar, divide it into how many things you have and colour them when done. This however leads to the issue you described: 90% are done quickly, 10% take time. So ideally you want to track against total completion time. If it takes 5 minutes to complete, you can based it off of that - but how do you know how long something will take that you have not done before?

[@jall3ri]

Isn't that because 90% of the tasks take 5% of the time

[@farble1670]

A lot of determinate progress bars are faked. The software has no way of knowing the progress, so it just starts filling it at a decreasing rate. Apple OS updates are famous for this. That's why they look like they are progress rapidly but hang at 95% forever.

[@afluka]

I'll never forget a story from one of my coworkers when he worked at his previous job. They had to develop a new application to replace an existing one for a client, and when doing so they greatly optimized the performance of the application. In one instance, an action that used to take 5-10 minutes now only took a few seconds. However, the users complained that the application is broken because they were used to the long-running process and thought the new application just skipped the whole thing. After a long and tedious back-an-forth trying to explain the situation, my coworker was eventually told by his superior to implement a progress bar animation with some arbitrary waiting time just to reassure the users that the work has been done. The progress bar indicated nothing. The process would always complete before the progress bar finished. But the users stopped complaining, so that's what they went with.

[@factzilla1868]

0:48 The idea progress bars somehow developed from Gantt charts appears to be a wikipedia fabrication (citogenesis) - it's a random unsourced claim from an anonymous edit in 2009. Meanwhile Brad Myers' 1985 paper on "percent-done progress indicators" actually mentions "giant thermometers in charity drives [that] fill up from empty to full" as the inspiration.

[@sebastiandraxler6522]

I met Brad Myers once and he explained the story, how he build his first progress bar (and in doing so to his knowledge the first progress bar). Today, progress bars often feel not that helpful anymore. But when you go from not knowing at all what's going on to printing dots on a screen indicating that something is happening and getting a very rough indication how much is left to do, I imagine that was quite a moment back then.

[@yousorooo]

Progress bars are literally just a bar chart showing the percentage.

[@TheGreatAtario]

These actually used to be called "thermometer bars" back in the day

[@mattlarge]

Top marks for perfectly lining up the in video YT progress bar with the actual YT progress bar in the intro! 😃

[@Palmit_]

que? Por favor, explique

[@rykehuss3435]

its a buffer bar

[@Palmit_]

thanks, :) yeah. but i dont see how it all lines ups like op suggested. @@rykehuss3435

[@PsychCode]

Disculpas por mi traducción aproximada, la barra de progreso en la pantalla coincide con la de tu dispositivo. ​@@Palmit_

[@adampax]

Never thought anyone could be so enthusiastic about progress bars 😁

[@nifflan]

Disappointing, I wanted a nice talk on progress bars in general, not to see a specific implementation and staring at code

[@ed_halley]

Who remembers text interface spinners? / | \ - / | \ -

[@smylesg]

Did they always spin counter-clockwise?

[@rabidbigdog]

PKZIP!

[@rabidbigdog]

@@smylesg Definitely clockwise. Maybe.

[@CallousCoder]

You mean |/-|\- 😉

[@pierreabbat6157]

Julia has a spinner consisting of a circle with a quarter or half marked in it, which spins by 90°. I tried searching the web, but there's someone named Julia Spinner.

[@prixtront7240]

I can't dislike this because it's educational but I think this video was all over the place and could have been better.

[@ej3281]

came thinking there was going to be some math, stayed because I love the way the presenter says "progress bar"

[@bruceschneier6283]

Valerio probably has the thickest accent I've ever encountered that was still almost perfectly understandable lol

[@Species1571]

Dave Plummer (Dave's Garage) did a video on this a little while ago about why the times are so unreliable. It gets tricky when the overall progress is actually many tasks which are not all equally complex.

[@Psyk60]

And those tasks may be limited by different hardware components. Say you have something which loads some data from disk, and then does some processing on it. The developer might decide that each part should represent 50% because they take roughly the same amount of time. But then a user comes along with a faster CPU and slower storage. Now that first "50%" is going to take up much more than 50% of the time.

[@cube2fox]

Dave's video addresses specifically file copy progress bars and the estimated rest time. Unfortunately it becomes clear why the original Windows progress bar screens were so bad at this: Dave still faila to notice a perfectly simple algorithm that prevents wild swings in time estimates: Just take the fraction of the transferred data and the time it took and scale it linearly to estimate how long the rest will take. That just means that if it took 2 minutes to transfer half the data, the estimate for the remaining half should also be 2 minutes. If it took 2 minutes to transfer 10% then the rest should be estimated to take 18 minutes. It's so obvious, but he never grasped it.

[@xliquidflames]

Way back in the day, in the mid aughts, I was teaching myself Flash and ActionScript. I was using it to make interactive websites. Progress bars were the bane of my existence. Sometimes they worked. Sometimes the exact same code that just worked, when installed on another page, stopped working completely. It was so frustrating. What I have always wondered about progress bars in Windows is why you see it sit at 100% for so long. In theory, you should never see a progress bar say 100%. You could see one say 99.9% but as soon as it gets to 100% it should go away because it's done. Right? So why do they sit at 100% for so long? This seems to be a Windows thing for some reason.

[@Palmit_]

i agree. i believe that they measure progress as the index list number of a task (A list from 1 to 101) they also do not use 0 as the starting index. you can easily extrapolate data on my theory, where 101 is 100% and the last task, at 100 is verification and crc. when that completes, the 101 is acheived. thats why 100% takes so long.

[@AS-we9xi]

I'm guessing that you didn't refresh the UI after you wrote the new progress bar value. If you use a library to display the bar it doesn't get to execute and refresh the display until all of your own code is done doing its thing. Which happens exactly when it is finished.

[@Palmit_]

yeah. what you said. @@AS-we9xi but u said it better. and i said it broader lol.

[@lory187]

Pensavo fosse un altro video di AFK, uno di quelli che mi gusto a pranzo o prima di dormire, poi ti sento parlare in inglese e dico vabbè sarà un caso o una memata, poi leggo il nome del canale e dico: "ah...". Veramente un bel video e un bell'esperimento, ti sei messo in gioco in una out of confort zone e sei andato alla grande, questa è una prova che il tuo canale personale, parlando in italiano è una grande chicca per pochi, è quasi un peccato avere una persona così acculturata tutta per noi, se parlassi in inglese e spiegassi in inglese avresti molto più seguito, ti faccio i complimenti per la lingua, nonostante si senta la cadenza italiana, la lingua è parlata perfettamente ed ho capito tranquillamente tutto, continua così

[@CatastrophicalPencil]

Italian accents are the best at explaining the emotive content of the lesson, plus the lesson.

[@pdelong42]

The bits I was interested in were actually covered in the last few minutes of the video, in a hurried manner. Any chance we could get a more in-depth treatment on how the time estimates are calculated? I could take or leave the graphical minutiae of rendering progress bars. The history was nice, though - before today, I had never considered the common heritage of Gantt charts and progress bars.

[@nyuh]

ooh this one is fun to watch. his enthusiasm about progress bars is infectious !!

[@Palmit_]

"MOVING AVERAGE" - Learning that one phrase has re-defined my life understanding. It explains so much in life terms, not just mathematical or coding. Thank you @Computerfile

[@j7ndominica051]

An "indeterminate" progress bar is a placeholder widget for an actual bar that may appear later. It only indicates activity, not progression. You can think of a textual bar as having two overlapping graphical progress bars of 1 pixel height. If the text is monospaced, the drawing can be greatly simplified.

[@TomGryn]

A well executed progress bar is a true showcase of developer brilliance

[@gkumartube]

showcase the developer's progress as a developer

[@Allenrythe]

This is why whenever I have to make a progress bar at work I have the label update on every iteration with the number of iterations it has to do for that task and the current iteration number. Before I started doing that I noticed lots of people would terminate a program well before it was finished because they thought it was hung. The only difficult situation is when a single interation can take an indeterminate amount of time. In which case you need to either notify the user with a log or update the text on the progressor so they know. Ideally you try to optimize your code to avoid those situations, but it's not always possible.

[@zaph254]

Computerphile is where programmers are made

[@codycast]

Huh? How so?

[@epicswirl]

@@codycastwhen a mommy programmer meets a daddy programmer

[@codycast]

@@epicswirl in other words you don’t know what he was talking about either :-)

[@infinitivez]

I made something similar to this when I was a kid, some 30 years ago. At first I was using ANSII control and programmatically indexing over the colors to be changed, before writing the final string to the screen, but then I found the thrill of using assembler Interrupts, and INT 10. Instead of maintaining two values, all I had to do was first write my string to the screen, then I used a loop to iterate over the horizontal position of the bar and replace the color attribute of the character at that particular X position , if it needed to be filled in. Unfortunately, RichLib seems to use ANSI for most of its processing, and wouldn't have access to that sort of thing (at least from what I tell/recall of ANSI?) But what is it you're doing @ 10:52 on line 177? Is this your own method or a hybrid mix using the Rich library, and how does it go about that recoloring? No idea why I'm so invested, it must be nostalgia 😂

[@redcollard3586]

Reaper is some of the greatest software ever made. Nice choice using it in the intro!

[@verybignw]

for a very long time, when booting osx (and even earlier than osx), the progress bar was actually based on the previous boot, which is why it would rarely finish booting when the progress bar reached the end. it would either finish before the progress bar reached the end, or the progress bar would reach the end and youd still have to wait...

[@luqcrusher]

10:22 “Some people keep saying why didn’t you do the background colour first, and then only you do the style? …It’s fine.” Spoken like a true programmer 😂😂

[@ej3281]

my progress bar library of choice is tqdm, which wraps any arbitrary iterator and can be customized to display loop information, which i think is nice

[@thelittleerik4806]

i love tqdm

[@FabioRossettiFI]

Valerio I want that grid fleece hoodie, where did you get it?

[@fdabelstein]

The inventor of the progress bar is laughing all the way to the bank. Where he will arrive in three minutes. No wait, in ten seconds. No wait, in five hours.

[@martixbg]

I literally wrote the exact same thing in HTML the other day. I just put 1 element behind the another, with inverted colors and adjust the width of the top one. Works like a charm.

[@XavierAway]

How long does an Italian progress bar take to complete? It’ll pasta finish line eventually

[@goncalocartaxana]

I think he's italian 🤌🤌🤌

[@jamessadventures1380]

Of course dude's got an espresso machine on his desk! 😂 6:50

[@General-Failure]

Questo è vero. 😄

[@olivierpelvin]

Nice, your final question about how they calculate ETAs is the most interesting, could there be a followup about that topic ?

[@EpicWolverine]

Your IDE is *begging* you to follow PEP 8 literally anywhere. Maybe an episode on Clean Code is in order.

[@gregstarr2]

I was triggered by this

[@cannaroe1213]

Sorry, but in no way is a progress bar the direct descendant of the Gantt Chart. People reinvent the progress bar every day whenever they write a program that takes longer than 5 minutes to complete, print(int((job/jobs*100)*"-",">") Don't get me wrong I love Gantt charts as much as the next mid-level manager, but a progress bar is just a progress % displayed graphically, which prerequires nothing but percentages and a refreshing/updating user interface. Cars have had fuel gauges from before Gantt's chart, they meet the minimal criteria.

[@khalilbaba7991]

Starting as a frontend engineer before shooting to Fullstack, i always wondered how the process functions. Normaly use an animation without giving ratio for a loading progress. Untill i understood processes to track data fetching by inputting flags with timeouts/event listeners. But due to faster network connection and my main specialty on data infrastructure, i have returned to using animation as i used to. Even most web based technologies today. Unless its tracking downloads or media contents.

[@gkumartube]

13:18 Very true, In one of my project i tried to implement a progress bar so user know task progress and completion without restlessly looking at a infinite spinning spinner. Implementing progress bars in local apps is bit easy but that my task involves two servers and a client. implementing progress bar in distributed app add another level of complexity to the code.

[@No0utlet]

This reminds me of a progress bar that I created for calculator programs that I wrote on my TI-83. The progress bar was just a series of pre-loaded drawings shown in sequence. The feeling was that the app was loading up but nothing was actually happening in the background.

[@luketurner314]

1:50 IIRC, the uninstaller for Flash player had a backward/reversed progress bar

[@alexlandherr]

My favorite progress bar mistake is when they are used in terminal emulators (e.g. Linux distros) and the width expressed in characters of the bar isn’t constant. This leads to “remnant characters” on the current line which aren’t always overwritten and can result in funny expressions when it’s all done.

[@SkEiTaDEV]

5:47 overcoming that mindset of "faster to do it myself" is what fuels the worlds CVEs

[@nurmr]

It looks like they're using rich and the customization is just how to style rich's progressbar. So not completely from scratch, thank goodness.

[@Aeduo]

The worst is the spinner that persists after the task has failed because the modern development paradigm is to always act like nothing is wrong and not say anything.

[@Kargoneth]

I was hoping for more philosophy. Time estimations, ways to quantify progress, adjusting progress when new information comes to the fore, etc...

[@shgysk8zer0]

This very nearly had a title that was an actual HTML element: . There's also the related which can show when a value is higher or lower than an optimum value. But I think that accessibility should have been brought up in this. The displayed progress via background is lost with visual impairments, including color blindness. And, at least in web development, accessibility is becoming... I don't want to say it's increasingly important, but we're starting to emphasize the importance.

[@Ar4an]

My knowledge progress bar grew in 13:50 😂❤

[@Ensorcle]

I was kind of hoping for an explanation of how an OS/program can know the progress status.

[@lucidmoses]

Yup. It takes a university professor to turn a simple ~4 lines of code in to multiple screen pages.

[@anzo.7806]

Right ? Like just a few ESC sequence and it was done ? Why overcomplicate things with this python library ??

[@thenoblerot]

Great video! Excellent presentation. Also, I think I fell in love... and I don't see a wedding ring! 😍Dr. Valerio 😆

[@Lolwutdesu9000]

This was probably the most convoluted way of making a progress bar....ever.

[@PaulsPubAndBrew]

One of my favorite cartoons shows a guy in a car on a phone. He says "I will be there in 5 minutes, no make that 24 hours. No make that 30 minutes. No make that 16 hours." Underneath all of this, the caption of the cartoon says "the programmer of the Windows file copy dialog box goes for a drive"

[@leonardogsperin]

Is the HP too (a little different but equal)

[@leonardogsperin]

Health points is a batery bar too

[@Zpajro]

I think you are referring to the "infinite moving average" at the end. And you can weigh it differently depending on how much you want to trust the latest data, say `old × (2/3) + new × (1/3)`

[@drooplug]

Hmm. I thought computerphile already did a progress bar episode. Maybe it was Tom Scott where I saw it. Anyhow, a lot of progress bars are designed to be slow in the beginning and become rapid at the end.

[@BaronSamedi1959]

99% of the progress bar takes 10% of the time, and the last 1 per cent takes 90% of the time. Nothing is moving, and you wonder if the machine has gotten stuck somehow.

[@TheZerothbase]

in python, my favorite text-based progress bar module is tqdm. very customizable.

[@paku302]

Os/2 installer would sometimes run backwards, then forwards, then backwards again. Do a video on that.

[@repairstudio4940]

How can you not click on a title simply labeled progress bars? Absolutely awesome! ❤

[@JonSnyderfudge]

That dude's IDE is screaming in pain.

[@HereticB]

3:10 'I am ninety percent done' , then you still have half the work left?

[@drgr33nUK]

He looks like he's had a few sleepless nights working on that progress bar :)

[@TheHackysack]

It's sad to find broken and/or buggy progress bars in so many pieces of software. It takes very little code to produce a fairly robust progress bar. The even sadder part is that it's the simpler ones that seem to be broken most often. As often as I can in the terminal, I use my own 10-line function for all my progress bars. It just outputs a simple 1-line bar, prefixed with some text (usually "Progress: ") and suffixed with either the percentage or iterations completed and per second. It updates in-place, self-adjusts the length of the bar when the terminal is resized, and clears the extra few cells/pixels of the bar that spill over onto the next line when the terminal is resized very quickly.. I've been calling it `rebar`, for "Responsive Terminal Progress Bar." It's not as fancy as some of the other ones out there, but I just don't find myself in need of most of the features they offer. Many of them are very clever and very beautiful, though.

[@hyperbaroque]

It is really easy to explain progress bars as a ratio of number of discrete graphical components available to percentage of task completion. Why is there a video for this?

[@LupinoArts]

Didn't Tom Scott make another Computerfile video on taskbars once?

[@rizenrik]

i built a curses program that has progress bars when certain modules are executed. It was simpliar concept to this but using just python and curses library included in python.

[@ChrisSeltzer]

Dave's Garage on KZbin has a good video about this at least within the context of the Windows File Transfer Dialog.

[@alubhau]

Mario teaching computer science is something I would pay to watch.

[@zxuiji]

8:08, pausing here for a moment, personally I woulda just created 2 counts: until = floor(count * done%) still = count - until Then did 2 loops, one for each, the 1st loop will always use the colour for 100% done and the 2nd loop will always use the colour for 0% done, the combine result is the progress bar. The terminal/console has codes for deciding the colour of the next character to print so just filling an array with spaces then overriding the center ones with the desired text is enough to select what character to print after telling the terminal what background and foreground colours to use.

[@zzzaphod8507]

Given the limited space, why not just report the percentage complete in text rather than showing it graphically? Not as much of a challenge, I suppose!

[@hamu_sando]

I'm not a Python developer/user, but I suspect this could be done fairly easily using tqdm or a binding to ncurses/pdcurses.

[@wolviex]

What IDE is this?

[@carter7246]

i like python programming as much as the next guy, but that's definitely not what i wish to see in a computerphile video.

[@Jose-Sousa]

While trying to keep in topic for the progress bars in terminal, but scoped under terminal applications, it would be more interesting to make a video regarding how terminal applications display the contents, what are ANSI Escape Sequences and a bit of the historical origins of all that...

[@isotoxin]

Is it every Italian programmer has the espresso machine on his table near the computer screen? 😀

[@subliminalvibes]

The KZbin premium download feature progress bar is based on total runtime, vs 'up-to what time is the file downloaded'. You can see that the speed of the bar's progression varies, with The bar slowing as it downloads part of the video with a lot of motion and detail, and it'll speed up (download more VIDEO per second) at the parts with no motion, low detail, or a still frame. Showing a percentage doesn't set any expectation on time of it's arrival however Microsoft DOES attempt to calculate arrival time and this is cumbersome and inaccurate. Data is compressed at the file level, so you may have a 10mb file expected however your computer needs to uncompress the data, which is totally random. A 1mb packet may decompress to 1.1 or 1.8mb depending on the 0s and 1s. Expectation is the factor I remove from my interaction with progress bars. 👍😎🇦🇺

[@mytube001]

An installer knows (should know) what needs to be installed, and how much space each component takes up. Any progress bar that indicates the total percentage of data to be installed should always be essentially accurate. It won't progress smoothly though.

[@BenRHarsh]

Because writing different size files takes different time per byte depending on the drive type, there are other tasks taking precedence over the installer, etc. It's a good guess to base it on file size but there is no way to know exactly the time the task will take. I believe Dave Plummer from Dave's Garage wrote one of the original Windows file copy progress bars and goes into a lot of detail on the topic on his channel.

[@gustavrsh]

Different file sizes transfer at different speeds.

[@j7ndominica051]

The extractor should honestly represent how much data has been written so far. The estimated time remaining is a separate, usually numeric indicator from the bar. Bars rarely jump back and forth with speed. The installation process may have multiple stages, only one of which is direct extraction of files. You could have registration of libraries, and a computation of some kind of lookup cache. Then you have to make an estimate how difficult those tasks are relative to file copy, which will be different depending on the speed of the CPU. The program may zip through one of the stages, and hang on another.

[@HacknMate]

Whats that coffee machine next to your monitor? I want it!!

[@DingDimlewitz]

2:12 I was waiting for a still frame and spinning loading circle for a couple of seconds.

[@wojciechwilimowski985]

Harmonogram lives on as the word for schedule in Polish

[@randy7894]

The best progress bars (for data exchange like file/dir copying) were on BeOS. Smooth and super accurate. Unlike the nonsense progressbars on Windows and linux.

[@Lion_McLionhead]

Making progress bars that don't get stuck at 99%, don't update the text too fast to read, & compute accurate ETAs is really hard.

[@ciscoserrano]

I like this guy!

[@LuigiElettrico]

Hmm, let's code it in pure C with printf and escape sequence codes. Accepted.

[@NelsinhoNecromacer]

Lovely accent! Great video

[@felixjohnson3874]

"But what *_is_* a progress bar?" -vsauce theme plays-

[@foobar9220]

I find it fascinating that progress bars are everywhere because strictly speaking nobody needs them, the progress they display is basically always wrong and making a progress bar that is reasonably synced with the actual progress is a pretty hard problem for a non-trivial program as the amount of work per step is hard to estimate

[@thezouave7636]

If you really think nobody needs progress bars, you should read "The Design of Everyday Things" by Don Norman.

[@david_pilling]

...give the impression of progress, the operation is perceived as taking less time whilst actually taking just as long.

[@Deadlious]

why "this" self reference? why...

[@rabidbigdog]

Every MacOS: "about a minute remaining" (many many many minutes later) "about a minute remaining" etc

[@MuddasirShah]

❤❤ I once tried to create a progress bar but … long story 😂 from tqdm import trange 😂😂

[@ArturdeSousaRocha]

Ah, yes, Gantt charts, the best way for project managers to fool themselves they can predict when a software project will be completed.

[@R-Tex.]

I still like Tom Scotts video over this one!

[@MF-MF]

4k ultra wide monitor for development of a very tiny text progress bar! ;-)

[@tunafllsh]

I was expecting a lesson about ANSII codes, which is what Rich library is mostly based on I think. But using Rich is so much nicer for programming text-based interfaces.

[@SpamMouse]

Not only but also, when carrying out basic tasks like file transfers things like "time remaining" is useful but also report back if ALL files were transferred successfully or if there were failures, and if so what were they. It's 2024 and you can not trust software to do the most basic tasks without 100% verification.

[@BrokebackBob]

Who is in charge of cuddling this teddy bear? Asking for a friend..

[@24hhhhours]

I had higher expectations for this video. I don't believe the language barrier is the primary issue; however, the video is excessively lengthy. It would be an improved video if it focused more on theoretical concepts rather than practical demonstrations.

[@alexlicata6520]

Guardando questo video mi sono reso conto di quanto è vero che solo noi italiani gesticoliamo 😂

[@kyleolson8977]

"When you have a text based program things become very hard. No. This is crazy talk. It's only easier in a graphical interface if you literally already have the whole widget, which isn't saying anything. It's easier to program if you don't have to program. Other than lack of experience, I have no idea why you think this,. I've done app UI for 27 years professionally, and I wrote text apps as a kid going back to 1980. If you have the ability redraw your text character by character with a foreground and background color, it's very, very easy in text. In the graphics if you have to write it from scratch it could be a little or much tougher depending on if it's a widget set than handles text easily or terribly, (like the incompetent Jetpack Compose text layout). There's an easy "draw to a buffer that you clip" trick which may work if the widget set doesn't get in your way. Even in the easiest case, the graphical code is probably tougher than any terminal-style text code.

[@MiXerek]

basically amazing video

[@testthisfordecficiencies]

I love coding progress bars.

[@unknown___638]

tqdm

[@Tb0n3]

I think anybody who grew up with computers in the 90s understands intuitively that progress bars are not a simple matter and can get it very wrong.

[@Faladrin]

I gotta say this topic is really scraping the barrel for the channel.

[@quandaviousvonheadsonzingl6453]

Nahhh dude sounds like Borat 😂 Very informative though ILY ♥️♥️