Creating an ASCII progress bar in C++

Sometimes it is useful to display a progress bar if your Command Line Interface (CLI) based application does processing in the background that takes a long time. This is relatively straightforward to do in a GUI framework based application but it’s also possible to create some kind of a “progress bar” in a CLI as well.

A very simple progress bar in a console window could simply involve displaying a character at each processing unit increment. For example, if in an image processing application, we need to print the number of images that have been processed, we could simply increment the count of the number of images processed and display an ASCII symbol each each (or a predefined quantum) increment. If we use the pipe (|) symbol, the progress-bar would look something like:

|||||||||||||||||

Not bad, but it’s still not possible to display additional information like the total possible length of the progress bar or current percentage.

To be able to display a more meaningful progress bar with additional information to go with it including the limit of the bar, percentage of completion, text displaying what entity is being processed, etc, we’ll need to do a bit more. Let’s start with the code first and then the output:

	int step = 1;
	int displayNext = step;
	int percent = 0;

	cout << "Processing " << totalImagesCount << " images..." << endl;

	// loop through the image count
	for (size_t i = 0; i < totalImagesCount ; ++i)
	{		
		// Individual image processing operations

                // Formatted progress indicator
		percent = (100 * (i + 1)) / totalImagesCount ;
		if (percent >= displayNext)
		{
			cout << "\r" << "[" << std::string(percent / 5, (char)254u) << std::string(100 / 5 - percent / 5, ' ') << "]";
			cout << percent << "%" << " [Image " << i + 1 << " of " << totalImagesCount << "]";
			std::cout.flush();
			displayNext += step;
		}
	}

Output:

Processing 431 Images...
[■■■■■■■■■■■■■■■■■■■■] 100% [Image 431 of 431]

We start by setting the amount of increment (step). displayNext is used to keep track of whether we’re under 100% or not. We can make the step increment as granular as you like or increment multiple units of the progress-bar indicator at a time. Percentage value calculation is straightforward, we simply take into account the total number of images available vs the number already processed.
We use a solid block ASCII character (■) to display a more realistic progress-bar, denoted by the character 254 and displayed as ■. It is part of the extended ASCII character set and should work on most machines.
It’s important to note that when we start, we still have to allocate space for the area where solid ASCII blocks will be printed in the future as the completion percentage increases. We do this by using one space (‘ ‘). Also, in this case we increment one block each time the percentage increases by 5.

That’s all there is to it. Hope you found this useful!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>