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 our 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
• Free CSS & JavaScript snippets for creating animated loaders

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

See the Pen Loader by Nicolas Slatiner (@slatiner) on CodePen.

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

See the Pen Pure Css Loader by Just a random person (@mathdotrandom) on CodePen.

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

This loading circle gif created by Glen Cheney is a beautiful and complex feature that uses

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

See the Pen Canvas Simple Circle Loader by Jack Rugile (@jackrugile) on CodePen.

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

See the Pen CSS Loader by Geoffrey Crofte (@CreativeJuiz) on CodePen.

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

See the Pen Three.js Loader by Lennart Hase (@motorlatitude) on CodePen.

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

See the Pen Organic Circle Canvas Loader by Jack Rugile (@jackrugile) on CodePen.

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

See the Pen Canvas infinite loader by MRU (@ruffiem) on CodePen.

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

See the Pen Loader dots by Dave DeSandro (@desandro) on CodePen.

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

See the Pen Blurred Gear Loader by Joni Trythall (@jonitrythall) on CodePen.

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

See the Pen CSS Stairs Loader by Irko Palenius (@ispal) on CodePen.

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

See the Pen ZbVVwa by Dave McCarthy (@AsLittleDesign) on CodePen.

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

See the Pen Loader css3 by Mathieu Richard (@MathieuRichard) on CodePen.

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

See the Pen Vivid CSS3 Spinner by Kevin Jannis (@kevinjannis) on CodePen.

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

See the Pen Prism Loading Screen by Ken Chen (@kenchen) on CodePen.

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

See the Pen Loader by Alex Rutherford (@Ruddy) on CodePen.

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

See the Pen Redirecting Loader by Mr Alien (@mr_alien) on CodePen.

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.

Preloader Animation

See the Pen Preloader SVG animation by Jason Miller (@imjasonmiller) on CodePen.

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

See the Pen SVG ∞ loader (no JS, cross-browser, minimal code) by Ana Tudor (@thebabydino) on CodePen.

No JS, cross-browser, minimal code. 20 lines of CSS and 4 lines of generated SVG.

Tomato loader with CSS vars

See the Pen tomato loader with CSS vars (no Edge support) by Ana Tudor (@thebabydino) on CodePen.

Doesn’t work in Edge due to lack of support for calc() as an animation-delay value.

Animated flippreloader

See the Pen Animated FlipPreloader – SCSS by Animated Creativity (@animatedcreativity) on CodePen.

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.

FAQs about loading animation

1. What is a loading animation and what is its purpose?

When a user waits for material to load, a loading animation shows them what is happening behind the scenes. Its function is to give the user visual confirmation that the system is handling a request and to aid in their understanding of the system’s operation even when it is not immediately obvious. By creating the idea that the material will ultimately load, loading animations can also aid to lessen user annoyance.

2. How do loading animations help improve user experience on a website or app?

By lessening the level of aggravation experienced by users while waiting for content to load, loading animations can contribute to an improvement in user experience. They can also show the user a visual indication that the system is operating and handling their request. Loading animations can help to maintain users’ interest in the information they are waiting for by keeping them informed about what is happening in the background.

3. What are some examples of different types of loading animations?

Progress bars, spinners, pulsing animations, and skeleton screens are a few examples of the various kinds of loading animations. Web applications frequently employ progress bars and spinners to show that a request is being processed by the system. Mobile apps frequently employ pulsing animations to let users know something is going on in the background. Skeleton screens are employed to give the user a preview of the content that will be shown as it loads.

4. How do I design a loading animation that is both visually appealing and functional?

The goal of the animation and the user’s expectations should both be considered when creating a loading animation. The visual appeal of a loading animation should not detract from the content being loaded. It should also be useful, giving the user unambiguous feedback on how the procedure is going. The performance of the animation should also be adjusted because users may become impatient and irritated with slow-loading animations.

5. How long should a loading animation be displayed before the content is loaded?

The intricacy of the content is loaded and the speed of the user’s internet connection determines how long a loading animation should be displayed. A decent rule of thumb is to keep the animation on screen for no more than five seconds, as users may become impatient with lengthier loading times. But, it’s crucial to strike a balance between this and making sure that the material has loaded thoroughly enough to offer a positive user experience.

6. How can I ensure that my loading animation is accessible to users with disabilities?

Following accessibility rules, such as offering alternative language for images and making sure that animations do not cause seizures in users with epilepsy, will help make sure that a loading animation is accessible to people with disabilities. Also, it is crucial to guarantee that the user has the ability to pause or stop the animation at any time.

7. What are some best practices for using loading animations on a website or app?

When utilizing loading animations on a website or app, it’s important to keep them straightforward and unambiguous, use them sparingly, and give users feedback on how the process is going. Also, it’s critical to check that the animation is user-accessible and has been performance optimized.

8. Can loading animations be customized to match the branding of my website or app?

Absolutely, loading animations can be changed to fit a website or app’s identity. This can support the brand identity and help users have a consistent visual experience. But, it’s crucial to strike a balance between branding and usability, making sure that the animation gives clear feedback on the status of the process and doesn’t take attention away from the material that is being loaded.

9. How can I measure the effectiveness of my loading animation in terms of improving user experience?

It’s crucial to get user input, such as through surveys or user testing, to determine how well a loading animation improves the user experience. User feedback can be used to assess how well the animation communicates the status of the process and whether it eases user annoyance during long loading times. To determine how the loading animation affects user engagement, it’s also crucial to monitor data like bounce rate and session length.

10. What are some common mistakes to avoid when designing a loading animation?

While creating a loading animation, common pitfalls to avoid include employing distracting animations, not providing feedback on the process’ progress, and using animations that are overly long. Also, it’s critical to check that the animation is performance optimized and accessible to all users. To guarantee that the animation works for all users, it is also crucial to test it on a variety of devices and internet connections.

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 interesting animations 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.

We hope you enjoyed this article created by the team at Amelia, probably the best appointment scheduling plugin for WordPress.

You should check out this one on website layouts.

We also wrote about a few related subjects like modern web design, layout design, bad websites, button design, visual design, best 404 page ever, web design trends and dark background.

Author Ivan Zdravkovic

Back to Previous

Share the article

Read Next

Back to Previous Read Next

View Comments (0)

Explore features Explore Demo

Read Inspiring Customer Stories

Check out how our user set Amelia for his business

Read the full story