Our insight here was that we needed to make it clear you are advancing toward your goal and not waiting. For example, in Google’s search application, elements move in, supporting the informational hierarchy and making it feel like content is loading immediately even when it isn’t. Google also focuses the user on progress by integrating the loading indicator into the transition animation moving left to right as the page you requested loads.

Incremental loading or skeleton screens are one of the best ways to focus your user on progress and not the frustration of waiting. You can effectively eliminate loading icons for load times from 100ms to approximately 450ms. Essentially a skeleton screen is a blank version of a page into which information is gradually loaded. As you can see in the below example, this creates a sense of immediacy, making the user feel like they can engage with content right away, even when your load times are the same as they were when you used a traditional loading indicator.

This technique focuses the user on the content and not the frustration of load times. That said, repetitive animations can also be just as annoying. When applying these techniques ensure there is variety in your animations and use them sparingly. In fact limiting your use of animations is good advice in most cases.

Just a quick postscript: next time you are developing or updating an app, mock-up a version with a traditional loading indicator and a version with a Progressive load. Once this is done, go around your workplace betting your colleagues which version loads faster. As they both will load in the same time frame, they most likely will be shouting you your next cheeky after work Beer, Coffee or Green Tea thing.