Blog /
Inspiration

All Inspiration Updates Case Studies Interviews
Inspiration 14 Oct 2019  ■ Comments

A Loading Spinner slows down time. Here’s what you can use instead.

It’s like starring at a clock, constantly ticking...tik tok…it shows you the time you’re wasting...tik tok…and makes it pass by even slower than it seems,
—

Have you ever noticed that when you are deliberately starring at the clock, watching the seconds tick by that time slows down? Or how quickly it flies by when you’re having fun? This exact same thing happens when you look at a loading spinner on your screen. The loading spinner is the only thing standing between the user and where they want to go, and so they notice every turn of every millisecond stretched across infinity. It’s one of the surest and fastest ways of losing some of your best users.

But if you need to use an animation to buffer the time your users actually spend waiting — here are some alternatives we think can help your users notice time slip by a little less.

All of these animations are made with Lottie, so they’re sure to run smoothly on Web, Android, iOS and more.

Geometry by Miljan Micunovic (58KB). https://www.lottiefiles.com/2844-geometry

Loader (13KB) https://www.lottiefiles.com/35-loader

ServisHero Loading by Nattu Adnan (76KB) https://www.lottiefiles.com/159-servishero-loading

LEGO Loader by Chris Gannon (135KB) https://www.lottiefiles.com/410-lego-loader

Cloud loader v1 by Nic Grobler (7KB) https://www.lottiefiles.com/2322-cloud-loader-v1

Loading circle by Paramesh Vadivel (4KB) https://www.lottiefiles.com/847-loading-circle

Loading by Luisa Fernanda Bolaños Beltrán (11KB) https://www.lottiefiles.com/935-loading

Loader by Imran Khan (4KB) https://www.lottiefiles.com/2163-loader

Stick and ball by Krystof (5KB) https://www.lottiefiles.com/462-stick-and-ball

Square Drop Loader by Chris Gannon (63KB) https://www.lottiefiles.com/252-square-drop-loader

Ice cream animation by Weifeng (14KB) https://www.lottiefiles.com/726-ice-cream-animation

Loading Semicircle by Shan (8KB) https://www.lottiefiles.com/57-loading-semicircle

Circle Loading by Paramesh Vadivel (2KB) https://www.lottiefiles.com/700-circle-loading

DNA loader by Jignesh Gajjar (591KB) https://www.lottiefiles.com/2140-dna-loader

Inattentive by Al Boardman (28KB) https://www.lottiefiles.com/990-inattentive

Dyslexia by Al Boardman (19KB) https://www.lottiefiles.com/991-dyslexia

Estimate by Al Boardman (28KB) https://www.lottiefiles.com/987-estimate

Customise the colours to fit your theme

If you use the Lottie editor to make any of the animations fit your product’s colour and theme. Just pick, edit and download — it’s as simple as that!

Use the Lottie Editor to customise the colours of your animation. https://editor.lottiefiles.com

How to use these animations on your projects.

For web:

  • Follow the implementation guide: http://airbnb.io/lottie/web/web.html
  • If you want an easy way out, just use the embed code on Lottiefiles.

For Mobile

  • iOS: http://airbnb.io/lottie/ios.html#getting-started-on-ios-or-macos
  • Android: http://airbnb.io/lottie/android/android.html#getting-started
  • React Native: http://airbnb.io/lottie/react-native/react-native.html

For Prototyping:

  • FramerX: https://store.framer.com/package/airbnb/lottie

For tonnes of Free Animations and to test and privately share your animations with your colleagues, check out https://www.lottiefiles.com

Comments