Animations are a huge part of many modern websites. They help present information, enliven websites, and keep users’ attention. The most common use cases for animations in client-side development are:
- representing data loading (preloaders);
- taking users through step-by-step operations (multi-step registration forms);
- reacting to user interactions;
- animating control elements (hover, click);
- grabbing the user’s attention (pop-ups);
- improving data visualization (landing pages, marketing campaigns).
The most common use case, however, is showing that data is loading. Depending on the website, it can take between several milliseconds and several seconds to load. Preloaders are used to entertain users while a website loads.
Preloaders can be implemented both as animated GIF images and as progress bars. Regardless of how the preloader looks, its task is always the same — to inform users that the page is loading and then disappear right after the page has fully loaded. If you would like to see a couple of great preloader examples, read our article: Top 30 Most Captivating Preloaders for Your Website.
Creating a preloader with CSS
As all modern browsers support CSS animation, we’ll show you how to create an animated preloader using pure CSS and no JavaScript. To implement a preloader, you can use CSS transitions or animations.
CSS transitions
The basic idea behind CSS transitions is to smoothly change CSS properties over a set period of time. This way, you can make smooth background transitions, change margins, and so on. Transitions are great for implementing hover effects and making elements appear on the screen. To control CSS transitions, you’ll need the following properties:
- Transition-property — sets up a list of properties that will be animated (e.g. background and opacity); by setting the value to all, you’ll animate all given properties;
- Transition-duration — sets the duration for the animation (in seconds or milliseconds);
- Transition-timing-function — defines the distribution of the animation throughout time (e.g. whether the animation will start slow and speed up gradually or the other way round); the full list of property values can be found here;
- Transition-delay — defines the time delay before the animation (in seconds or milliseconds).
Properties should be listed in the following order: property, duration, timing-function, and delay. For instance, this code
transition: background 0.5s linear 0.3s;
will result in the following animation:
CSS animations
CSS animations offer developers a way of creating more complex animations with the @keyframes rule (which represents the animation keyframes, setting up a list of rules that will be followed throughout the entire animation), and animation properties. For the Chrome, Safari, and Opera browsers, you should add the -webkit prefix.
To define an animation in CSS, you need to define the following properties:
- Animation-name — defines a name for the animation
- Animation-duration — sets the time duration for the animation in seconds or milliseconds
- Animation-timing-function — sets the timing function of the animation
- Animation-iteration-count — indicates how many times an animation should be repeated
- Animation-direction — sets the direction for the animation
- Animation-play-state — defines animation playback properties
- Animation-delay — sets a time delay for the animation start
- Animation-fill-mode — defines elements before and after the animation
You can also use CSS animations for short notation of animation subproperties. The full list of properties that can be animated can be found here. Also, remember that you cannot animate properties defined as auto.
Don’t animate element width, height, top, left, bottom, or right properties. These properties have to be recalculated and redrawn for each animation frame, which can be very expensive performance-wise. You can, however, substitute them with transform. For instance, you can use scale transformation properties instead of changing width and height.
You shouldn’t animate the display property, but you can use opacity to hide an element with CSS by setting it to 0. Because this won’t remove the element, instead making it invisible, it will still be sensitive to mouse clicks. To avoid this issue, use pointer-events: none. Pointer-events decides when, how, and if devices can interact with an element. Also, it won’t influence the overall page performance.
Below, you can see an example of code for creating a preloader with only CSS properties.
/* "rotate" - animation title */
/* duration 1s*/
/* number of repetitions - infinite */
.preloader__dots {
animation:1s linear infinite rotate;
}
/* "down" - animation title */
/* duration 1s*/
/* number of repetitions - infinite */
.preloader__dot:after {
animation:1s linear infinite down;
}
/* Modern browsers except for Chrome, Opera and Safari */
@keyframes rotate {
0% {
transform:rotate(0);
}
100%,50% {
transform:rotate(90deg);/* Turning circles through a 90° angle*/
}
}
/* Chrome, Opera, Safari */
@-webkit-keyframes rotate {
0% {
transform:rotate(0);
}
100%,50% {
transform:rotate(90deg);
}
}
/* Modern browsers except for Chrome, Opera and Safari */
@keyframes down {
0% {
transform: translate3d(0,0,0);
}
50% {
transform: translate3d(0,0,0) scaleX(1);
}
75% {
transform: scaleX(1.5) /* Changing the circle width*/
}
100% {
transform: translate3d(25px,0,0); /* Shifting the circle by 25px */
}}
/* Chrome, Opera, Safari */
@-webkit-keyframes down {
0% {
transform: translate3d(0,0,0);
}
50% {
transform: translate3d(0,0,0) scaleX(1);
}
75% {
transform: scaleX(1.5);
}
100% {
transform: translate3d(25px,0,0);
}
}This code will result in a preloader that looks like this:
By adding a couple more elements, we can make this loader a bit more complex and interesting:
You should always keep in mind that CSS animations tend to require a lot of resources and can cause a variety of issues because of the huge DOM tree, redundant nesting, number of animated elements, and number of animation layers. For this reason, add animation effects with care and, most importantly, don’t overdo them. Also, test animations on mobile devices — they should work swiftly and smoothly and not interfere with the page content regardless of screen size.
Make use of third-party services
If our example is still too complex for you or you’re just really short on time, there are many third-party services that can generate CSS preloaders. The most popular are:
