Introduction
When there is a visitor to our web page, and they click on the button, then they expect some feedback from the developer side. If there is no feedback from the developer side, then the user may think something may be wrong. Also, they quickly go away from the website before something happens.
We can prevent these by taking the help of a loading animation. With the help of the loading animation, we can provide a better user interface for knowing the people that some process occurs in the background.
What is a Loading Animation?
In CSS, a loading animation serves as a form of notification to reassure users that their request is being processed by the system. This animation is triggered when a user initiates an action, like clicking a button, and continues until the request is fully processed.
Additionally, certain animations feature a status bar that shows the remaining duration for the request to finish. This feature offers live updates, making the user experience more engaging. Numerous tools are available for generating loading animations, with CSS being the recommended method for creating such animations.
Loading Animations in CSS
We can also take the help of another language, such as Javascript or a simple gif loader, to create the animation loader. However, CSS provides some strength to create the animation loader. Those strengths are as follows.
- We can easily edit it. We can also quickly edit the duration, color, speed, and other animation elements.
- If we change the scale of the animation, then it does not lose its quality.
- If we use a graphics processing unit, then it makes the animation fast and smooth,
- We can also pause the animation with the help of the animation-play-state property.
Certain web browsers might lack support for the loading animation feature. Examples of such browsers include Internet Explorer 9 and Opera Mini. In cases where the loading animation is not supported by the browser, it is advisable to opt for a GIF instead.
Examples of CSS Loading Animations
There is a wide variety of loading animations accessible online. Let's explore a few illustrations.
1. Infinite Loading Animation:
These animated prompts prompt the user to hold on without specifying a specific duration. This style of animation is suitable for instances where the duration of the wait is uncertain or extremely brief.
Infinite Loading Animation Example with Code
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.center {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000;
}
.wave {
width: 5px;
height: 100px;
background: linear-gradient(45deg, cyan, #fff);
margin: 10px;
animation: wave 1s linear infinite;
border-radius: 20px;
}
.wave:nth-child(2) {
animation-delay: 0.1s;
}
.wave:nth-child(3) {
animation-delay: 0.2s;
}
.wave:nth-child(4) {
animation-delay: 0.3s;
}
.wave:nth-child(5) {
animation-delay: 0.4s;
}
.wave:nth-child(6) {
animation-delay: 0.5s;
}
.wave:nth-child(7) {
animation-delay: 0.6s;
}
.wave:nth-child(8) {
animation-delay: 0.7s;
}
.wave:nth-child(9) {
animation-delay: 0.8s;
}
.wave:nth-child(10) {
animation-delay: 0.9s;
}
@keyframes wave {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
</style>
</head>
<body>
<div class="center">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</body>
</html>
Output
2. Determinate Loading Animation
This loading visual indicates the overall duration for webpage loading, showcasing the elapsed time either numerically or as a percentage. It may manifest as a circular graphic or a progressing bar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #EBF2F5;
overflow: hidden;
text-align: center;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#animationWindow {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="animationWindow"></div>
<!-- Load the Bodymovin Library -->
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var select = function(s) {
return document.querySelector(s);
};
var animationWindow = select('#animationWindow'),
animData = {
wrapper: animationWindow,
animType: 'svg',
loop: true,
prerender: true,
autoplay: true,
path: 'https://your-secure-domain.com/path/to/play_fill_loader.json,'// Replace this with the secure URL of your JSON animation file.
rendererSettings: {}
},
anim;
anim = bodymovin.loadAnimation(animData);
anim.addEventListener('DOMLoaded', onDOMLoaded);
anim.setSpeed(1);
function onDOMLoaded(e) {
anim.addEventListener('complete', function() {
// Animation complete event handler
});
// Uncomment this line if the function is defined and ready to be used.
ScrubBodymovinTimeline(anim);
}
function ScrubBodymovinTimeline(anim) {
// Sample implementation to scrub the animation timeline.
// You can modify this function based on your requirements.
var scrubber = document.createElement('input');
scrubber.type = 'range';
scrubber.min = 0;
scrubber.max = anim.totalFrames - 1;
scrubber.value = 0;
document.body.appendChild(scrubber);
scrubber.addEventListener('input', function() {
anim.goToAndStop(parseInt(this.value), true);
});
}
});
</script>
</body>
</html>
Output
3. Progress Bar:
These particular animations can be generated using CSS. They appear to be more linear in nature rather than circular. They also provide information to the user regarding the time remaining to finish a task, displayed in terms of volume, fraction, or percentage.
Output
Progress Bar Example with Code
Let's generate a progress indicator using HTML and CSS.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #2a9d8f;
font-family: Arial, sans-serif;
color: #fff;
}
.progress {
position: relative;
height: 20px;
width: 300px;
border: 2px solid #f4a261;
border-radius: 15px;
overflow: hidden;
}
.progress .color {
position: absolute;
background-color: #e76f51;
width: 0px;
height: 100%;
border-radius: 15px;
animation: progress 4s infinite linear;
}
@keyframes progress {
0% {
width: 0%;
}
25% {
width: 25%;
}
50% {
width: 50%;
}
75% {
width: 75%;
}
100% {
width: 100%;
}
}
</style>
</head>
<body>
<div class="progress">
<div class="color"></div>
</div>
<div id="progressPercentage">0%</div>
<script>
const progressBar = document.querySelector('.progress .color');
const progressPercentage = document.getElementById('progressPercentage');
function updateProgressWidth(percentage) {
progressBar.style.width = `${percentage}%`;
progressPercentage.textContent = `${percentage}%`;
}
// Update the progress every 2 seconds (for demo purposes)
let currentProgress = 0;
setInterval(() => {
currentProgress = (currentProgress + 5) % 105; // Increment progress by 5%
updateProgressWidth(currentProgress);
}, 2000);
</script>
</body>
</html>
Output
4. Skeleton Screen:
The skeleton screen appears as an empty interface with a designated ```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Skeleton Screen Example with Code
Let's generate a skeleton layout using HTML and CSS.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Welcome to the Placeholder Shimmer Demo</h1>
</body>
</html>
Output
### 5. CSS Loading Spinner
This form of loading animation signifies that the animation loads in a circular pattern. The animation persists until the page loading process is finished. Numerous varieties of loading spinners are accessible in CSS. Now, let's explore a few of them.
- Ease-in-out Loading Spinner:
This loading animation features a property specifying the animation timing as "ease-in-out", signifying a gradual beginning and a gradual conclusion.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Output
- Rainbow Loading Spinner:
This dynamic design comprises a single parent div and multiple child div elements. Each individual div will be formatted with a spectrum of colors resembling a rainbow.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Output
- SVG Loading Spinner:
This animated spinner is a form of SVG spinner that is crafted using three dashes. Its movement commences as a single dot and gradually expands to take on a circular shape. This animation perpetually loops without a defined endpoint.
- Gradient Loading Spinner:
We should opt for a gradient loading spinner whenever a distinctive loading spinner is required. This spinner is created using the span element, each with its own background color.
- Loading Spinner with Moving Text:
This variety of animated velocity rotates every 2 seconds. Additionally, it includes a div element holding the text "loading."
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Output
## How to Make a Simple Loading Animation in CSS
There are several straightforward procedures we can follow to generate a basic loading animation for our website.
### 1. HTML structure:
In the initial phase, we need to establish the webpage layout for the animation. Below is the HTML code snippet for the structure:
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Animation</title>
</head>
<body>
</body>
</html>
### 2. CSS style:
After establishing the HTML layout, the subsequent phase involves applying styling using CSS.
CSS code:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f2f2f2;
}
.loader-container {
position: relative;
}
.loader {
width: 80px;
height: 80px;
border-radius: 50%;
border: 4px solid #f3f3f3;
animation: pulse 1.5s linear infinite;
}
@keyframes pulse {
0% {
transform: scale(0.8);
border-color: #3498db;
}
50% {
transform: scale(1.2);
border-color: #e74c3c;
}
100% {
transform: scale(0.8);
border-color: #2ecc71;
}
}
Merging both codes will result in the final code resembling the example provided below.
Complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Output
## CSS Loading Animation Best Practices
When generating the loading animation, it is crucial to exercise caution. Here are some guidelines for crafting the CSS loading animation.
The most efficient loading animations are those that require minimal time to complete. When designing a loading animation, it is important to consider the user's tolerance for waiting. Developers should aim to keep the duration of the animation to a minimum to ensure a swift loading experience. By optimizing the loading time, users will appreciate the efficiency of the process.
- Alleviate the frustration associated with waiting.
Reducing the waiting time can be more bearable if the developer decides to incorporate engaging elements on their website. Such animations can capture the user's interest and effectively engage them.
- Animations play a crucial role in defining your brand identity.
There exist more suitable locations to launch a marketing campaign than this one, however, it is advisable to retain the logo on the brand.
Inform the user about the cause of the delay.
The primary objective of the loading animation is to minimize the time users spend waiting. Therefore, in order to alleviate user boredom, it is advisable to avoid using plain phrases such as "Please wait while we set things up for you" or "Hang on a moment as we retrieve your recently generated file."