Loading Indicators

This is a collection of Loading Indicators, widely considered to be a good UX practice. Loading Indicators are a simple, but effective way of letting users know something is happening. A common pattern is an overlay with an animated indicator. This prevents users from clicking around and makes it obvious that the site is doing something of value.

Popular patterns

Circular Loaders

Circular loaders can be placed in a variety of spots (modules, overlays, inline) making them extremely flexible. Here is an example from twitter:

twitter Loading Indicator - Walter Colindres

Loading Bars

These bars sit at the top of the view and as the page loads, a progress meter will fill the screen horizontally. You view an example on ESPN Soccer:

ESPN Soccer Loading Indicator - Walter Colindres

Loading Indicator Animations

Biskitty

Biskitty uses a rotating circle with an interior gradient.

Biskitty Loading Indicator - Walter Colindres

dribbble

dribbble Loading Indicator - Walter Colindres

ESPN

The World Wide Leader in Sports rolled out a redesign and with it came a subtle, but elegant loader:

ESPN Loading Indicator - Walter Colindres

GameFly

GameFly animates the circular piece of their logo:

GameFly Loading Indicator - Walter Colindres

Limeades for Learning

Great use of lime here!

Limeades for Learning Loading Indicator - Walter Colindres

New York Times

The Times uses a gothic "T" as their indicator.

New York Times Loading Indicator - Walter Colindres

PayPal

PayPal uses a nice blue halo.

PayPal Loading Indicator - Walter Colindres

Slack

Great animation here, they repeatedly animate the lines from the logo to show activity.

Slack Loading Indicator - Walter Colindres

Twitter

twitter Loading Indicator - Walter Colindres

YouTube

YouTube is where the loading bar indicator started.

YouTube Loading Indicator - Walter Colindres