Using loading animation on websites and apps: Examples and snippets to use
What is the use of a loading animation on a website?
One of the issues that every web developer has to keep in mind is the page loading time. Granted, with the higher internet speeds that we have nowadays, most of the pages and apps open rather quickly. However, there is always some space left for improvement.
In some cases, it is unavoidable to let the users wait for a brief moment for all the data and pages to load. In moments like that, you need something to get the users attention and keep them on the site long enough for all the content to load.
One way to do that is by adding an eye-catching loading animation or loading gif to the site to keep the users entertained while they are waiting for the rest of the site to load.
For instance, even for the Amelia website, we use a very simple loading animation to let our users know that something is happening at the moment.
Let’s take a look at these interesting loading gif animations.
Loading animations inspiration
We have found some of the best loading animations and loading gif, and here they are:
Orb animation WIP
This is a great example of a loading screen gif that catches your attention for long enough for the rest of the content to load. It depicts a rotating circle surrounded by a mysterious smoke that you can’t help but watch for a moment. And a moment is really all it takes…
Loading Micro Animation
Since the website behind this loading animation is a brewery, this loader gif makes all the sense in the world. It depicts the production process of the brewery products which will not only reduce the frustration of the users that have to wait for the page to load, but it will actually spark their interest in a creative way.
Avanti e indietro loader
This simple loading animated gif is perfect for catching the user’s attention by transferring the positions of graphics in a due order. The beauty of this loading icon lies in its simplicity. It is intuitive and it will keep the users occupied rather than letting them leave the page in frustration.
Loading Screen Animation — Hourglass
This loader animated gif is great for two reasons. The “Thanks for your patience” note helps establish a communication with the user and getting a certain level of understanding. The hourglass preloader, on the other hand, attracts user’s attention and makes their waiting more comfortable.
“bouncy” — B&W loading animation 9
The best things are often the simplest ones and the same rule applies to the CSS loading animation. While this one might seem boring to some, it is actually perfect in its simplicity. And the best thing about it is that you can’t stop looking at it.
Melting loader
This loading animations gif combines two very effective elements when it comes to catching the user’s attention and making the waiting time more pleasant for them.
It uses the fluid effect which resembles melting and immediately occupies the user’s attention, and at the same time, it adds soothing elements such as the glowing line you can see.
Loader of things
The nesting pattern is always a good choice when it comes to loading animated gifs. Add the 3D effect into the mix and you have a perfect loading animation that is worth creating!
Preloadeer Animation
When designing your loading animation, always think about the target audience and what is it that they would like to see. This website did a great job at that by combining several things associated with Christmas and creating a preloader gif perfect for children-targeted online courses. Triggering an emotional response with your users is always a good idea if you know how to do it right.
Loader Animation
Whoever designed this waiting animated gif wanted to make sure that it occupies the user’s attention on several different levels. So rather than creating a simple loading animation, they opted for a multi-screen display pattern which is eye-catching and bound to occupy the user’s attention for a while. Add the rotating effects and the gradient colors into the mix and you will create some lovely loading screens.
Loading screen visual for app
This loading bar gif not only serves its purpose, but it is also really cool and fashionable. It was designed for the Android/iOS mobile app/web and it combines the rotating globe with the color contrasts that create an interesting sci-fi visual effect.
Loading animation
The worst way of creating a loading image gif is by creating something that makes no sense and tells no story at all. The users don’t want to see that; they want something that creates an emotional connection with them.
The preloader images that we see here are ideal for that. This loading animation with the rapidly changing numbers and quickly rotating color bars lets the user know that the site is being loaded as fast as possible and that the problems are being processes in the background right then and there.
Free CSS & JavaScript Snippets for Creating Animated Loaders
While we have had a chance to see some pretty interesting static loading pages in the past, adding the dynamic elements into the mix is always a good idea when you want to occupy the users’ attention.
Let’s take a look at this loading gif generator collection that will help you create the loading animation exactly as you want it.
Loading Bar with Counter
This beautiful loading bar was designed by Nicolas Slatiner and it is an intuitive loading animation that displays the loading percentage. The design is clean and its beauty lies in its simplicity. It is a great progress bar gif that would fit right into any website.
Light Loader
This light loader in the shape of a spinner is a great loading animation who like simple designs with a little twist. It uses the starburst shape coupled with pure CSS3 animations to create a gif loading effect that will occupy the user’s attention immediately.
Multi-Animated Loader
A few lines of JavaScript to add a show/hide feature even though you can make it work even without this feature just fine. That means that it can be run in pure CSS3 with many options including different colors, sizes, and speed.
Canvas Fractal Loader
Do you remember the old school Windows screensaver? This striped fractal canvas loading icon gif does feel like it a little bit. It uses a lot of JavaScript and even though it is called a canvas element, it does not actually use a canvas element on the page.
In fact, the reason it’s called that lies in the fact that it is powered by Sketch.js which is a natural canvas library. So if you don’t have a problem with playing around with JavaScript a little bit on your site, this loading animation is one of the great choices for you.
OuroboroCSS Loaders
The OuroboroCSS loaders created by Geoffrey Crofte are powered by pure CSS and they operate on a repeating animation cycle that gives the illusion of disappearing into the shape.
However, while this design is perfect for internal loaders, using it as a full page loading animation might not be the best move because it isn’t really powerful enough to stand alone on the whole page.
Thermometer Loader
When designing this custom thermometer-style loader, the creator, Hugo Giraudel, really pushed the limits of CSS with this loading animation moving through a number of different colors from bottom to top. The animations are pure CSS and there are only 3 HTML elements nested inside each other.
Three.js Loader
The Three.js loader by Lennart Hase is such a cool load gif that we simply had to add it to the list. It uses the free Three.js 3D library to create a rotating cube on a small surface which one can’t help but keep looking at.
The animation is controlled through JavaScript and WebGL rendering. With the 3D design being one of the coolest new trends in web design, adding some 3D elements to your loading animation is always a good idea.
Organic Circle
This impressive canvas circle loader is built entirely on the HTML canvas element using ctx and JavaScript calls to create this amazing and eye-catching effect from scratch. This isn’t a loader circle that could be easily incorporated into any website, but you have to admit that it was worth seeing it.
Simple Circle Rotator
If you want a canvas loader that is simple, nice-looking, yet really effective, this one might be just the right choice for you. It rotates the inner circle of a canvas element infinitely with some basic JavaScript controlling the animation. One of the best things about the simple and elegant designs such as this one is the fact that they can be easily incorporated into any site without being disruptive or overwhelming.
Pure CSS Loader Dots
If you are in search of a pure CSS loader, this cool and fun loading animation CSS is definitely worth considering. It is simple to set up, eye-catching, and fun to look at. Another big plus is that is can be easily incorporated into any website and serve its purpose of a great loading animation. The dot shapes and animations run through CSS and there’s no JavaScript required.
Sliding Square LoaderView
This sliding square loader makes the waiting a bit less frustrating as it keeps your eye moving along with the squares. A great solution for businesses who sell electronics or games online to keep their visitors engaged with the website.
DotsLoaderView
The bouncing black balls that appear out of nowhere and disappear serve as an entertaining element and could be used for websites that want to look presentable yet with a pinch of playfulness.
Blurred Gear Loader
A blurred gearwheel loader with the three spinning gearwheels embodies movement and complexity and could be appropriate for businesses who market machinery or mechanic parts.
CSS Stairs Loader
The descending and ascending stairs loader with a white ball jumping on top has a minimalistic design yet it is very straightforward. It could make sense for business who want to present themselves as serious and trustworthy.
Loading Pen
With a light touch of simplicity, the caterpillar-like colorful circles that move to the left or right and come as one at each side make loading less boring to visitors. The loader is appropriate for almost any kind of businesses with its universal animation, and it should keep visitors amused while waiting to land on the homepage.
CSS Loader
A simple “attention getter” loader like this rolling cube that gets bigger when moving forward and returns to its initial shape when going back, is a reserved solution for business that wants to appear smart and sophisticated to the visitor.
Vivid CSS3 Spinner
The vivid spinner loader with the rotating rainbow that rolls into a sort of geometric flower-like shape can cheer the visitors up and help them get ready for something fun and exciting. Such loader could be used for businesses who market their products or services to kids. It should work well for children’s education sites
Prism Loading Screen
The prism loading screen should remind one of the LinkedIn’s background for photos. The loader remotely looks like constellations which are moving in space with the main element in the middle which could potentially feature a corporate logo. The loader could be used for businesses that work with international clients, for example in the B2B sector.
Loader
Like variety? Here is the loader which keeps a visitor entertained, letting them see a countdown accompanied by changing animation of different pictures. Keep in mind, that this loader can have any pictures rotating so it can cater to fit any business’s needs.
Redirecting Loader
Here is a silhouette of a man with a jetpack on his back flying as fast as he can. Such loader which redirects a user to the next page can be used by almost any business, especially the ones that would like to highlight the speed element of their service.
Codepen Loading Dots
Having a minimalistic and succinct design, this dot preloader could be used by artistic people or designers for their online portfolios for instance.
Preloader Animation
Shouldn’t this preloader remind one of the snake game? This energy icon animation with a plug can make sense for internet providers or any other agencies who help businesses and clients collaborate.
SVG ∞ Loader
No JS, cross-browser, minimal code. 20 lines of CSS and 4 lines of generated SVG.
Tomato loader with CSS vars
Doesn’t work in Edge due to lack of support for calc() as an animation-delay value.
Animated flippreloader
An awesome flip preloader made in CSS. Colors are fully logical on flip. Any colors can be set easily.
SpinKit
Simple loading spinners animated with CSS. See demo. SpinKit uses hardware accelerated (translate and opacity) CSS animations to create smooth and easily customizable animations.
CSS-Spinner
Collection of 12 small, elegant pure css spinners for your website loading animation.
Ending thoughts on Using Loading Animation on Websites
When designing a website, you have to take every little detail into an account. Having a wonderful website is useless if the loading time is too long and half of the users give up even before they get a chance to see your site.
To avoid that from happening, you should incorporate an interesting loading animation into your website and occupy the user’s attention for as long as necessary until the rest of the content loads. Get creative and design a funny waiting gif that every user would be happy to see!
If you enjoyed reading this article about loading animation, you should also read these:
Originally published at wpamelia.com on November 28, 2018.
