Creating a Progress Bar with Styling and Calculating Percentage in Python

The author of this article begins by discussing their personal experience with creating a progress bar due to limited screen space. They mention that if the text were to overflow, they would have to truncate it and use ellipses to indicate the end of the text. This got them thinking about how to create a more sophisticated progress bar that could display the percentage in real-time.

To achieve this, the author decided to fill the progress bar with the actual calculated percentage. They explain that they need to show the cursor (or the next character) to give an indication that the progress bar is still being updated even if it's not visible yet. The cursor would be displayed at the end of the progress bar. This approach allowed them to get a sense of whether or not the user was expecting a certain time for the task to complete.

The author then explains their thought process behind calculating the percentage. They mention that they use an integer number to calculate the number of characters needed to fill the progress bar, and adjust it accordingly based on the calculated percentage. This ensures that the progress bar is displayed accurately even when the number of characters needed to fill it is not a whole number.

One potential optimization that some people may suggest is to display the background first and then style it afterwards. However, the author found this approach inconvenient because it meant that any previous styling would be overwritten by new styling at each iteration. They preferred their original approach, where they styled everything from scratch in each iteration, as it gave them more control over the overall appearance of the progress bar.

The article then moves on to an example code snippet that demonstrates how to create a progress bar with the author's suggested approach. The code includes a loop that advances the progress bar by 10 units every time, and displays the percentage using a simple text-based representation. The author notes that this is not a particularly complex or advanced topic, but they wanted to provide an example of how to achieve this effect in Python.

Finally, the article touches on the issue of accurately calculating the expected time for a task to complete. The author mentions that some interfaces use techniques such as moving averages or exponential weighting to estimate the remaining time based on previous times for similar tasks. However, they also note that these approaches can be affected by factors such as hardware and software overhead, which is why it's often necessary to use more conservative estimates.

"WEBVTTKind: captionsLanguage: enprogress bars how many of them we see every day you download something you get progress bar you install a new program there you go even now while you're watching this video there is a cursor here on YouTube player saying that which point of this video you're at and that is another example of a progress bar however have you ever thought about it the question is like what is a progress bar it's a graphical element that indicates the progression of a task sometimes it give you you know some extra bit of information such as the ETA which although it stands for estimate the time of arrival it provides you with a rough estimate how much time is left till the operation at hand will be completed the story of progress bar dates back the birth of computers in the 19th centuries a Polish management research came up with something called horm monogram or monograph which showed production schedules so this idea didn't take off because it was a piece of research written in Polish and very few people knew about it later somebody called Harry Gant came up with a similar concept called the gun chart which everybody still today us it so yeah a progress bar can be seen as a direct descendant of Gart which were invented around in the 1910 back in the days they were used to maximize the production in a munition manufacturer company now basically we use in operating system to see if something's completely like installing a program progress bars can take many forms as I mentioned before it can be you know a rectangle fields or a spinner just to mention a few sometimes they work backward what I mean by backward think of a battery indicator in your smartphone and sometimes a progress matter might not even indicate anything like have you ever seen those one bouncing left and right those are called indeterminate progress bar and they appear when the length of the task at hand cannot be determinated at least at the beginning for some reason a very easy example would be when your web browser is starting a download and the server can take you know some seconds to reply to to actually start the download and maybe a FR then developer might stick and indeterminate progress bar which bounce back and forth until the actual download gets started and begin to transfer data into your computer most of the graphical interface libraries no matter whether they they are actually graphic or textual there is always some sort of widget to represent and have a progress bar in your program but what if it's not exactly what you need so recently I ended up developing a texture based application which now currently I still some bugs but I'm 90% done so I need to polish it a little bit and I'm using this python Library called textualized that allows you to develop very nice texture based interfaces so I need to put a progress bar in a very narrow space like 10 to 15 characters depending on the size of your terminal window I cool stick the progress bar that it's already in the library and the problem solved that is exactly what I did at the beginning however something was missing this program I made basically transfers files back and forth for my personal backup storage and I want to show the actual download or upload speed in kilo or megabyte per second if I have this piece of information let's say next to the progress bar which already have only 15 characters the progress bar will be very very narrow pretty tiny what I wanted to do is to have a progress bar where it FS on top of the text so the text is on the progress bar which is something that you can easily do when you have a graphical interface but when you have a text based you know program Things become very hard to do and this is basically what I'm going to show today so so before we go to the code I will show you exactly what I mean let's say that is nearly 50% done so this is part is somehow colored I'm not coloring all of it you will see why in a bit and this part is still you know to be filled because the task is nearly 50% done and I want to have characters on top like text let's suppose that I want to write my name that has exactly seven characters which is v a l e and then after I want to have with the different colors because when the progress bar advances by one character my R the background of the r becomes green and the r becomes blue why I don't know you I just get Prov with this colors but J apart with the style of the color scheme this is actually what I want to do because the space I have is very narrow the only way I can fit information is on the progress bar very easy to do when you have many pi in a graphical use interface but in the terminal you need to work this around it's not extremely hard to do but I don't know why these people haven't thought about it and probably I believe that there might be Library providing that but I I wasn't reaching the point that the time needed for me to search what I need it was taking longer that I said just do myself I have here a class that I called highlighted uh progress bar I don't know it might not be a fancy name but is that the name I came up with I'm not going through the entire class I will focus only on the most important bits so here I have three Conant just to have an example of you know colors so the background means the background color of the unfilled progress bar the bar is basically the color up to the point the progress bar has been fil and the cursor here you will see a bit what it does let's skip for for the moment so here I have my Constructor that takes the essential information of the progress bar like the total number of steps because somebody can say 100 step but it's not necessary it can be whatever unit you want and the sides is the actual size in number of characters of the progress bar and then you have the three cols that by default I'm setting with these three examples I have here so let's go to the core of this class which is my render method meod which is here so behind the scene I'm using another python Library called reach which allows you to have Rich Text which has been done by the same developers of that textualized Library so basically they came up with reach to have a very nice colored text in your terminal and then they came up with that Library which if you fancy having a look I suggest you to play around because you will get very nice applications in in your terminal so when you render you basically display a label on top of a progress bar now for your label you can also add the placeholder which in this case my placeholder will be two percentage symbol which means that internally this method will replace that with the actual percentage of the progress but so anytime two percentage symbols are found will be replaced with the I don't know 20 30% whatever it is here I Define a text to be rendered and the text class comes from reach which also allows me to have paddings and colors so I don't need to do let's say manually with the control SS of the terminal and basically here I do the center right alignment if I needed or if it's a left alignment I just don't need to do anything because that comes uh for free here this is a very important basically I cut I truncate the text because as I said in my case I have a very narrow space and if the TT overflow I just basically cut it and put the ellipses basically three dots which basically is not actually three characters with three dots it's one character in um in unic code that is represented by three dots when is displayed on the screen and here basically I have all the bit of code to calculate the percentage and here start to make the style so here what I do exactly is to fill the progress bar up to the character n because if I have uh let's say 10 characters and uh the progression arrived to 20% I need to fill two characters so the first thing I do is boom I'm to the end character so far so I need to show this and the first thing is like I feel those characters with the character of the bar style which includes the background and the foreground color because if you remember there's a different foreground color for the empty bits for the F bits then here I display the the cursor so the cursor is something that I wanted to have and I will show you in the example that so when I'm calculating the percentage I calculate also the number of characters I need to fill and that is an integer number so either I F two or three characters but if when I calculate here this um n and I can get the next car percentage I can get flop number if I need to fill 2.5 characters i f the Third characters of a different color just to give the indication that is going ahead you know it's not like hanging there nothing is happening then here I just put two pipes at the beginning just to have a sense of a square and the last thing I do is to fill the whole progress bar with the background color now some people can say why don't you do the background first and then you do all the style it's fine so because when you rea the start to everything the previous things youve done won't be overwritten so stay there so and I found this quite convenient when I was writing the this program because uh I need first to check if the actual progress part was feeling that was for me the most important bit and now here we have an example just very simple I have a loop that advances the progress bar by 10 units every time uh I just put a sleeve of 1 second so it won't be pretty fast this gives us the time to appreciate it a little bit more and I'm just putting 50 characters and you will see computer file two square brackets and inside square brackets the percentage now let me run this and the help it works yeah it's working it's progressing you see when the progress bar goes on top of computer file the text becomes black which is basically what I wanted right and here it's over nothing fancy well not for the way you see here but in the program I had it was exactly what I need said nice now if I have four you know uploads or downloads I can see each of them the speed of each of them and was like spot on now let's see if I can recreate an example where you can see this uh csor filling in so let's reduce the advance by two let's run it one of the reasons I asked about making this video originally was I have a camera Sony camera and when you format or initialize a SD card it is hilarious and I will put it on the screen as to what happens but the counting is in seconds and I think this is the problem why is it saying I'm doing it in seconds it is just hilarious all depends exactly all depends the how the ETA is um is calculated so sometimes the way this is done by some interfaces for what I've seen by you know digging a little bit in their code Thea is calculated by what they call a moving average or exponential moving a has a width name which basically gets the the time for the last task uh plus the previous time it has computed divided by two and because the previous time is always a divided by two already so if you keep expanding it becomes by four by by 16 so basically it weighs more than last task but you don't know whether your Sony camera accounts for that or some you know if this C this task is done we think that it it has two seconds left whatever yeah because they have their hardware and they know how more less it reacts right I think this is why these Spinners came into being because you know let's not set expectations for the person who's the user you know let's just make a spinner you don't know how long this will take because the x86 machine code has two instructions that allow us to do Dan one is called erand and the other one is called stopan abandoned futuristic cities with over plants right and then I just put them in a for Loop and just produce 200 of them so I can pick the nice onesprogress bars how many of them we see every day you download something you get progress bar you install a new program there you go even now while you're watching this video there is a cursor here on YouTube player saying that which point of this video you're at and that is another example of a progress bar however have you ever thought about it the question is like what is a progress bar it's a graphical element that indicates the progression of a task sometimes it give you you know some extra bit of information such as the ETA which although it stands for estimate the time of arrival it provides you with a rough estimate how much time is left till the operation at hand will be completed the story of progress bar dates back the birth of computers in the 19th centuries a Polish management research came up with something called horm monogram or monograph which showed production schedules so this idea didn't take off because it was a piece of research written in Polish and very few people knew about it later somebody called Harry Gant came up with a similar concept called the gun chart which everybody still today us it so yeah a progress bar can be seen as a direct descendant of Gart which were invented around in the 1910 back in the days they were used to maximize the production in a munition manufacturer company now basically we use in operating system to see if something's completely like installing a program progress bars can take many forms as I mentioned before it can be you know a rectangle fields or a spinner just to mention a few sometimes they work backward what I mean by backward think of a battery indicator in your smartphone and sometimes a progress matter might not even indicate anything like have you ever seen those one bouncing left and right those are called indeterminate progress bar and they appear when the length of the task at hand cannot be determinated at least at the beginning for some reason a very easy example would be when your web browser is starting a download and the server can take you know some seconds to reply to to actually start the download and maybe a FR then developer might stick and indeterminate progress bar which bounce back and forth until the actual download gets started and begin to transfer data into your computer most of the graphical interface libraries no matter whether they they are actually graphic or textual there is always some sort of widget to represent and have a progress bar in your program but what if it's not exactly what you need so recently I ended up developing a texture based application which now currently I still some bugs but I'm 90% done so I need to polish it a little bit and I'm using this python Library called textualized that allows you to develop very nice texture based interfaces so I need to put a progress bar in a very narrow space like 10 to 15 characters depending on the size of your terminal window I cool stick the progress bar that it's already in the library and the problem solved that is exactly what I did at the beginning however something was missing this program I made basically transfers files back and forth for my personal backup storage and I want to show the actual download or upload speed in kilo or megabyte per second if I have this piece of information let's say next to the progress bar which already have only 15 characters the progress bar will be very very narrow pretty tiny what I wanted to do is to have a progress bar where it FS on top of the text so the text is on the progress bar which is something that you can easily do when you have a graphical interface but when you have a text based you know program Things become very hard to do and this is basically what I'm going to show today so so before we go to the code I will show you exactly what I mean let's say that is nearly 50% done so this is part is somehow colored I'm not coloring all of it you will see why in a bit and this part is still you know to be filled because the task is nearly 50% done and I want to have characters on top like text let's suppose that I want to write my name that has exactly seven characters which is v a l e and then after I want to have with the different colors because when the progress bar advances by one character my R the background of the r becomes green and the r becomes blue why I don't know you I just get Prov with this colors but J apart with the style of the color scheme this is actually what I want to do because the space I have is very narrow the only way I can fit information is on the progress bar very easy to do when you have many pi in a graphical use interface but in the terminal you need to work this around it's not extremely hard to do but I don't know why these people haven't thought about it and probably I believe that there might be Library providing that but I I wasn't reaching the point that the time needed for me to search what I need it was taking longer that I said just do myself I have here a class that I called highlighted uh progress bar I don't know it might not be a fancy name but is that the name I came up with I'm not going through the entire class I will focus only on the most important bits so here I have three Conant just to have an example of you know colors so the background means the background color of the unfilled progress bar the bar is basically the color up to the point the progress bar has been fil and the cursor here you will see a bit what it does let's skip for for the moment so here I have my Constructor that takes the essential information of the progress bar like the total number of steps because somebody can say 100 step but it's not necessary it can be whatever unit you want and the sides is the actual size in number of characters of the progress bar and then you have the three cols that by default I'm setting with these three examples I have here so let's go to the core of this class which is my render method meod which is here so behind the scene I'm using another python Library called reach which allows you to have Rich Text which has been done by the same developers of that textualized Library so basically they came up with reach to have a very nice colored text in your terminal and then they came up with that Library which if you fancy having a look I suggest you to play around because you will get very nice applications in in your terminal so when you render you basically display a label on top of a progress bar now for your label you can also add the placeholder which in this case my placeholder will be two percentage symbol which means that internally this method will replace that with the actual percentage of the progress but so anytime two percentage symbols are found will be replaced with the I don't know 20 30% whatever it is here I Define a text to be rendered and the text class comes from reach which also allows me to have paddings and colors so I don't need to do let's say manually with the control SS of the terminal and basically here I do the center right alignment if I needed or if it's a left alignment I just don't need to do anything because that comes uh for free here this is a very important basically I cut I truncate the text because as I said in my case I have a very narrow space and if the TT overflow I just basically cut it and put the ellipses basically three dots which basically is not actually three characters with three dots it's one character in um in unic code that is represented by three dots when is displayed on the screen and here basically I have all the bit of code to calculate the percentage and here start to make the style so here what I do exactly is to fill the progress bar up to the character n because if I have uh let's say 10 characters and uh the progression arrived to 20% I need to fill two characters so the first thing I do is boom I'm to the end character so far so I need to show this and the first thing is like I feel those characters with the character of the bar style which includes the background and the foreground color because if you remember there's a different foreground color for the empty bits for the F bits then here I display the the cursor so the cursor is something that I wanted to have and I will show you in the example that so when I'm calculating the percentage I calculate also the number of characters I need to fill and that is an integer number so either I F two or three characters but if when I calculate here this um n and I can get the next car percentage I can get flop number if I need to fill 2.5 characters i f the Third characters of a different color just to give the indication that is going ahead you know it's not like hanging there nothing is happening then here I just put two pipes at the beginning just to have a sense of a square and the last thing I do is to fill the whole progress bar with the background color now some people can say why don't you do the background first and then you do all the style it's fine so because when you rea the start to everything the previous things youve done won't be overwritten so stay there so and I found this quite convenient when I was writing the this program because uh I need first to check if the actual progress part was feeling that was for me the most important bit and now here we have an example just very simple I have a loop that advances the progress bar by 10 units every time uh I just put a sleeve of 1 second so it won't be pretty fast this gives us the time to appreciate it a little bit more and I'm just putting 50 characters and you will see computer file two square brackets and inside square brackets the percentage now let me run this and the help it works yeah it's working it's progressing you see when the progress bar goes on top of computer file the text becomes black which is basically what I wanted right and here it's over nothing fancy well not for the way you see here but in the program I had it was exactly what I need said nice now if I have four you know uploads or downloads I can see each of them the speed of each of them and was like spot on now let's see if I can recreate an example where you can see this uh csor filling in so let's reduce the advance by two let's run it one of the reasons I asked about making this video originally was I have a camera Sony camera and when you format or initialize a SD card it is hilarious and I will put it on the screen as to what happens but the counting is in seconds and I think this is the problem why is it saying I'm doing it in seconds it is just hilarious all depends exactly all depends the how the ETA is um is calculated so sometimes the way this is done by some interfaces for what I've seen by you know digging a little bit in their code Thea is calculated by what they call a moving average or exponential moving a has a width name which basically gets the the time for the last task uh plus the previous time it has computed divided by two and because the previous time is always a divided by two already so if you keep expanding it becomes by four by by 16 so basically it weighs more than last task but you don't know whether your Sony camera accounts for that or some you know if this C this task is done we think that it it has two seconds left whatever yeah because they have their hardware and they know how more less it reacts right I think this is why these Spinners came into being because you know let's not set expectations for the person who's the user you know let's just make a spinner you don't know how long this will take because the x86 machine code has two instructions that allow us to do Dan one is called erand and the other one is called stopan abandoned futuristic cities with over plants right and then I just put them in a for Loop and just produce 200 of them so I can pick the nice ones\n"