Loading Animations 101

Loading animations are a great way to keep users engaged while waiting for your website or app to load. They can also be used for call-to-actions throughout your page (button loadings and more). Read on below to learn more about best practices, examples and more.

What's On This Page

Welcome! Here you’ll learn some information about custom loading animations.  Here’s a look at what’s included on this page. 

What Are Loading Animations

Loading animations are a visual cue that the system is working. They reassure users that they haven’t been forgotten and improve their overall experience. Loading animations can also be used to direct user attention to specific areas of the screen or create a more polished and professional look for your website or app.

There are a variety of different loading animations that you can use, and the best one for your project will depends on the type of content you’re loading and the overall tone of your site or app. Subtle animations like a spinning wheel or a simple progress bar work well for websites with a professional look and feel. If you’re loading more playful content, you might want to use an animation that’s more fun and engaging, like a bouncing ball or a flying cartoon character.

Popular Preloading Formats

JSON (iOS & Android Ready)

The two examples above are created in JSON format. JSON is a faster file format than GIF, it also supports transparent backgrounds for all loading animations. This can be ideal if you have a gradient background or want an image to shine through on the other site. 

Learn more about JSOn animations (iOS and Android Compatible), here. 

GIF Animated Loaders

The example below is a loading animation in GIF format. While GIF is great for social media, landing pages and presentations it does come with a few caveats. GIF does not support background transparency so you’ll want to make sure that the background color of your GIF animation matches the placement (i.e. if you’re PowerPoint presentation is blue you’ll want to make sure the background of the GIF is also the same color of blue to avoid a border).

GIF Loading Bar Animation

SVG

SVG loading animations are a bit redundant, in the sense that “SVG” simply stands for ‘Scaleable Vector Graphics.’ SVGs are typically designed in a vector-based program such as Adobe Illustrator. SVG animations are actually just those graphic files manipulated to interact in a certain way. 

For example, image the SVGs are the body of a car, you still need an engine and fuel to make the car go where you want. This is where 3rd party code or software arrives to help animate the SVGs. JSON/Lottie animations (more info in the link above) are actually just SVGs manipulated for the web. Here’s a gear/cog loading animation as an example below.

This was created in Adobe Illustrator and then exported to After Effects for animation.

Video Loading Animations (Transparent Background)

Loading Perceptions

Is something happening behind-the-scenes or not?

Believe it or not this is one of the biggest considerations when creating a preloader animation. What some companies will do is actually create and embed a branded (whether through company colors or icons) loading animation into the screen of an app or website…but there’s nothing actually taking place behind-the-scenes.

Why do this you ask?
Simple. 

There’s research to support the fact that the more interactions or touchpoints that a visitor has with a company’s colors, logos or icons, the more they will subconsciously remember this brand over time (especially when it comes time to making a buying decision). One of the best 

Increasing GIF Speed

There are three main ways to increase the loading/rendering time of a GIF. These are:

Caching systems such as plugins and 3rd party compression tools can do wonders for images and larger file GIFs on a website. If you are using WordPress a good one that I’ve used in the past is “WP-Rocket.” What these caching plugins do is compress the size of an image behind the scenes until it is needed on a case-by-case basis. 

Hosting Providers: Hosting companies are not all created equal, some are faster than others and have better servers and database networks across the country. If you are planning to host many GIFs or larger images on your site I would recommend searching around for a quality hosting provide, personally I use Siteground. 

CDNs: Content Delivery Networks serve up your content throughout the world using the closest server center to where the visitor is pulling the information from. Think of these as digital telephone lines that are stronger closer towards the source. Cloudflare is one of the more popular ones at this point in time. 

File Size: Depending on where you want to use your GIFs, if not embedded into your website, the total file size can range from anywhere to something small like an email signature GIF of about 100kb to a customized (very intricate GIF) of 9,000mb. 

*Note: Google Ads have a maximum file limit of 150kb for reference but these are for banner ads and a different set of criteria go into these. 

GIF vs. Video

If you are planning to host many GIFs or try and push a GIF to the maximum file size for your website, this will vary on a case by case basis, I might suggest embedding a video on your site instead. While this doesn’t necessarily have the same appearance and functionality as a GIF, it will help to load faster than an embedded animation (there are exceptions such as JSON format but I’ll get into that in another post). 

As a general rule I might recommend creating a maximum GIF length of about 10 seconds (looping without skips of course) for a landing page animation. This is because most personal and business websites are not equipped for larger file sizes and simply want to load fast. A good exception that I’ve found is Mailchimp and Medium. Both utilize CDNs and host website animations that are quite large in file size. 

Get In Touch:

Need a custom loading animation? Start a conversation with the form below and I’d be glad to learn more!

Get In Touch

Questions and Conversations

Submit Your Project Info

Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible.