Loading Animations

I used this week’s design challenge to create variations of loading animations for different use cases.

I created three loading animations for different uses.

1. Traditional progress bar for when the system wants to show progress and has the information to know how much progress as been made and how much is left (traditionally viewed as a percentage).

Progress is shown from, effectively, 0% to 100%

2. Indefinite loading spinner for when a screen is being loaded and the time to completion is variable or unknown. The animation runs indefinitely until the content is loaded.

3. Combo progress bar and spinner to similarly show known progress without using up the horizontal real estate required by the first design.