Faded shape as container

How to use it

Duplicate the shape of a progress indicator and give it a lower contrast appearance. Use it as a container for the progress indicator so that as progress increases, the shape is filled.

When to use it

You can show how much progress there has been, and how much is left, with this method. It's better than not showing a container at all because the user does not know how long the progress bar will be, otherwise. Unlike other types of containers for progress indicators, this one will not take up any more space in the design than the finished progress bar will, so it is neater.

I use "progress indicator" because this does not have to be bar shaped. It could be a circle that fills up like a pie chart would, for example, or in the shape of a fish. The choice is yours. It could also be text that is filled from left to right, so it does not have to be a solid shape either.

What to watch out for

You need to be careful to make it obvious that this is a container for something else. For example, if the container is always visible on screen and only starts filling up when the user takes some action, they might assume it is just a divider, rather than a progress bar.

Examples