Loading Indicators

Published: 06/24/2020 / Updated: 07/03/2020

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:

//images.ctfassets.net/3w88rbos5p4h/rKeDA2Gj7YQIXSDMeHib7/8bb795a105465d8690d738b024e678e1/twitter-logo-loading-indicator-walter-colindres.gif

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:

//images.ctfassets.net/3w88rbos5p4h/OMXfufgRnz10Ce8vcdH6R/36c4dffbbdc66c85224f4ec63e6bd1a4/espn-soccer-loading-indicator-walter-colindres.gif

Loading Indicator Animations

Biskitty

Biskitty uses a rotating circle with an interior gradient.

//images.ctfassets.net/3w88rbos5p4h/5GhjGILtwPpvUeDZqvRRcR/6d19efcaea5322f485cc5bd0fcb80578/biskitty-loading-indicator-walter-colindres.gif

dribbble

//images.ctfassets.net/3w88rbos5p4h/4LfFiPnjDh2YAmH7oXb7tR/36577492568384faa75ff1aafd6a067b/dribbble-loading-indicator-walter-colindres.gif

ESPN

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

//images.ctfassets.net/3w88rbos5p4h/2ik1BskPCt7VYVmAoBrKiu/c2926ab34f33c1a96fb19a6592f2d5a5/espn-loading-walter-colindres.gif

GameFly

GameFly animates the circular piece of their logo:

//images.ctfassets.net/3w88rbos5p4h/5zKf3AYVyN2DBP5WEKSOwB/01e4dd341e13d4079ece76e5d492c5b7/gamefly-loading-walter-colindres.gif

Limeades for Learning

Great use of lime here!

//images.ctfassets.net/3w88rbos5p4h/6ht18K69CvC5Z7bgO5jymE/c36c3dc3fbafd4852ca5871fda57c309/limeades-loading-indicator-walter-colindres.gif

New York Times

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

//images.ctfassets.net/3w88rbos5p4h/3dOsHCn1c7webzOWI7OGr6/c204fbca09fa9b33a26e6550b3270954/new-york-times-walter-colindres.gif

>

PayPal

PayPal uses a nice blue halo.

//images.ctfassets.net/3w88rbos5p4h/5cVO0B2D27a3ReIxRzyj6V/caad9adfbe508053e7d22e1d0bf1b4bf/paypal-loading-animation-walter-colindres.gif

Slack

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

//images.ctfassets.net/3w88rbos5p4h/20ySQRkA8EZEzfCrLySCtZ/79a48bc47ef2a3f82fe3493a460c0dcb/slack-loading-indicator-walter-colindres.gif

Twitter

//images.ctfassets.net/3w88rbos5p4h/1bycf8Bxanzhb522F9d6WD/1d28df2211b36f1bcd10b269353f9145/twitter-loading-indicator-walter-colindres.gif

YouTube

YouTube is where the loading bar indicator started.

//images.ctfassets.net/3w88rbos5p4h/1utsarM8LQuRCPij7oqhwV/33b0184aaef88f27d4f7a30953eecd23/youtube-loading-indicator-walter-colindres.gif