Why use loading Animations
Loading animations are a great way to keep users engaged while waiting for your website or app to load. By providing a visual cue that the system is working, you can reassure your users that they haven’t been forgotten and improve their overall experience.
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.
preloading animations and formats
Preloading animations are similar to loading animations, but they play before the content actually loads. This gives users a preview of what to expect and keeps them engaged while the content is loading.
There are a few things to keep in mind when creating preloading animations. First, make sure the animation is short and doesn’t include too many frames. Too much motion can slow down the loading process or even cause browsers to freeze.
Also, avoid using too many colors or effects. Again, these can slow down the loading process. Stick to a simple design with a limited number of colors and no special effects.
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).
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.
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?
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 loading 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.
WordPress Page Loading Animations
If you’re using WordPress, there are a number of plugins that can help you add loading animations to your site.
One popular option is LoftLoader, seen on this site, which allows you to choose from a number of different animations and customize the color, size, and position of the animation. There are plenty out there, both free and paid, it’s just a matter of finding the one that works best for you.
Transparent Loading animations
If you’re looking for a transparent loader, especially for a website or app, I would recommend a Lottie animation. Lottie is a format that has two key benefits, small files sizes and a fully transparent background.
For a website, this can be especially useful as you don’t have to worry about the color of the loader matching your site’s background.
how to create a loading animation for a website
Adding a loading animation to a website is a pretty simple process. Start with a vector-based design program, like Adobe Illustrator to get the shapes exactly how you want. Then, animate in a software such as Adobe After Effects before exporting in the format of choice. You might need some custom code to embed the animation, depending on the platform used.
The code will vary depending on the platform you’re using and in some cases (such as the WordPress example above), you can simply use a 3rd party plugin to add the animation to your site. Of course, you’ll need to have some knowledge of the content management system that you’re using (WordPress, Squarespace, Wix, etc.) but if you aren’t sure there are plenty of developers out there who can help.
Get your own custom loaders
If you don’t feel like creating your own and have some colors or ideas in mind, feel free to get in touch. I’d be glad to chat further and quote you out a custom loading animation. Start by using the form below.