CSS Loader

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, loading animation is nothing but a type of notification for the user that ensures the user that the system is still handling their request. When the user clicks on a button until the completion of the request, the animation loads.

Also, some animations have a progress bar that indicates the remaining time for the completion of the request. This also provides a real-time update that reduces the boringness of the user. There are so many tools by which we can create the loading animation. But CSS is the best practice for the creation of the loading animation.

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.

Some browsers may not support the loading animation. Such browsers are Internet Explorer 9 and Opera Mini. If the browser does not support the loading animation, we must go for GIF.

Examples of CSS Loading Animations

There are so many different types of loading animation available on the internet. Let's see some examples.

1. Infinite Loading Animation:

These animations ask the user to wait without providing a waiting time. We can use this type of animation when the waiting time is unknown or the waiting time is very short.

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 animation shows the total time it takes to load the webpage. It also displays the total timing as a number or percentage. It can also be visible as a drawn circle or a bar filling up.

<!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://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.13/lottie.min.js"></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 are some specific animations that can be created with the help of CSS. These are looking like linear rather than circular. It also tells the user how much time is left to complete the task. The remaining time is shown in volume, fraction, or percentage.

Output

Progress Bar Example with Code

Let's create a progress bar with the help of 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 looks like a blank screen that contains a placeholder.

Skeleton Screen Example with Code

Let's create a skeleton screen with the help of 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>
  .main-item {
  padding: 10px;
  background-color: #f1f1f1;
  width: 700px;
  }
 
  .background-masker {
  background-color: #f1f1f1;
  position: absolute;
  }
 
  .btn-divide-left {
  top: 0;
  left: 25%;
  height: 100%;
  width: 5%;
  }
 
  @keyframes placeHolderShimmer {
  0% {
   background-position: -800px 0
  }
  100% {
   background-position: 800px 0
  }
  }
 
  .animated-background {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background-color: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
  background-size: 800px 104px;
  height: 70px;
  position: relative;
  }
 
  .static-background {
  background-color: #f6f7f8;
  background-size: 800px 104px;
  height: 70px;
  position: relative;
  margin-bottom: 20px;
  }
 
  .shared-dom {
  width: 800px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  }
 
  .sub-rect {
  border-radius: 100%;
  width: 70px;
  height: 70px;
  margin: 10px;
  background-color: #ccc;
  }
 
  .css-dom:empty {
  width: 280px;
  height: 220px;
  border-radius: 6px;
  box-shadow: 0 10px 45px rgba(0, 0, 0, .2);
  background-repeat: no-repeat;
  background-image:
   radial-gradient(circle 16px, lightgray 99%, transparent 0),
   linear-gradient(lightgray, lightgray),
   linear-gradient(lightgray, lightgray),
   linear-gradient(lightgray, lightgray),
   linear-gradient(lightgray, lightgray),
   linear-gradient(#f1f1f1, #f1f1f1);
  background-size:
   32px 32px,
   200px 32px,
   180px 32px,
   230px 16px,
   100% 40px,
   280px 100%;
  background-position:
   24px 30px,
   66px 30px,
   24px 90px,
   24px 142px,
   0 180px,
   0 0;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  }
 
  /* Additional styling for improved visibility */
  body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f1f1f1;
  }
 
  h1 {
  text-align: center;
  margin-bottom: 30px;
  }
 
  .shared-dom-label {
  text-align: center;
  margin-bottom: 10px;
  }
 </style>
</head>
<body>
 <div class="main-item">
  <h1>Welcome to the Placeholder Shimmer Demo</h1>
 
  <div class="static-background">
  <div class="background-masker btn-divide-left"></div>
  </div>
 
  <div class="animated-background">
  <div class="background-masker btn-divide-left"></div>
  </div>
 
  <div class="shared-dom-label">Shared DOM Elements</div>
  <div class="shared-dom">
  <div class="sub-rect"></div>
  <div class="sub-rect"></div>
  <div class="sub-rect"></div>
  <div class="sub-rect"></div>
  <div class="sub-rect"></div>
  <div class="sub-rect"></div>
  <div class="sub-rect"></div>
  <div class="sub-rect"></div>
  </div>
 
  <div class="css-dom">Animated CSS DOM Placeholder</div>
 </div>
</body>
</html>

Output

5. CSS Loading Spinner

This type of loading animation indicates that the animation loads in a circular motion. The animation is continued until the loading process of the page is completed. There are so many types of loading spinner available in the CSS. Let's discuss some of them.

Ease-in-out Loading Spinner:

This loading animation has a property that contains the animation timing as "ease-in-out". This means it has both a slow start and a slow end.

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 {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 margin: 0;
 background-color: blue;
}
 
.spinner-container {
 position: relative;
 width: 60px;
 height: 60px;
}
 
.spinner {
 position: absolute;
 width: 60px;
 height: 60px;
 border-radius: 50%;
 border: 3px solid #3498db;
 border-top-color: transparent;
 animation: spin 1s ease-in-out infinite;
}
 
@keyframes spin {
 0% {
  transform: rotate(0deg);
 }
 100% {
  transform: rotate(360deg);
 }
}
 
 </style>
</head>
<body>
 <div class="spinner-container">
  <div class="spinner"></div>
 </div>
</body>
</html>

Output

Rainbow Loading Spinner:

This animated style contains one parent div and several child div. Each div will be styled with rainbow colors.

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>
 .loader {
  background: #000;
  background: radial-gradient(#222, #000);
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99999;
}
 
.loader-inner {
  bottom: 0;
  height: 60px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
 
.loader-line-wrap {
  animation: 
  spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
 ;
  box-sizing: border-box;
  height: 50px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform-origin: 50% 100%;
  width: 100px;
}
.loader-line {
  border: 4px solid transparent;
  border-radius: 100%;
  box-sizing: border-box;
  height: 100px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }
 
.loader-line-wrap:nth-child(1) .loader-line {
  border-color: hsl(0, 80%, 60%);
  height: 90px;
  width: 90px;
  top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
  border-color: hsl(60, 80%, 60%);
  height: 76px;
  width: 76px;
  top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
  border-color: hsl(120, 80%, 60%);
  height: 62px;
  width: 62px;
  top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
  border-color: hsl(180, 80%, 60%);
  height: 48px;
  width: 48px;
  top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
  border-color: hsl(240, 80%, 60%);
  height: 34px;
  width: 34px;
  top: 35px;
}
 
@keyframes spin {
  0%, 15% {
  transform: rotate(0);
 }
 100% {
  transform: rotate(360deg);
 }
}
</style>
</head>
<body>
 <div class="loader">
  <div class="loader-inner">
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  </div>
 </div>
</body>
</html>

Output

SVG Loading Spinner:

This loading spinner is a type of SVG spinner which is created with the help of three dashes. This animation starts as a dot and expands until it forms a circle. This animation is an infinite loop.

Gradient Loading Spinner:

We should go for a gradient loading spinner whenever there is a need for a unique loading spinner. It is made with the help of the span element. These span elements have their background color.

Loading Spinner with Animated Text:

This type of animated speed spins at a speed of 2 seconds. It also has a div tag that contains the text as 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>
 <style>
  

body
{
 margin:0;
 padding:0;
 background:#262626;
}
.ring
{
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 width:150px;
 height:150px;
 background:transparent;
 border:3px solid #3c3c3c;
 border-radius:50%;
 text-align:center;
 line-height:150px;
 font-family:sans-serif;
 font-size:20px;
 color:#fff000;
 letter-spacing:4px;
 text-transform:uppercase;
 text-shadow:0 0 10px #fff000;
 box-shadow:0 0 20px rgba(0,0,0,.5);
}
.ring:before
{
 content:'';
 position:absolute;
 top:-3px;
 left:-3px;
 width:100%;
 height:100%;
 border:3px solid transparent;
 border-top:3px solid #fff000;
 border-right:3px solid #fff000;
 border-radius:50%;
 animation:animateC 2s linear infinite;
}
span
{
 display:block;
 position:absolute;
 top:calc(50% - 2px);
 left:50%;
 width:50%;
 height:4px;
 background:transparent;
 transform-origin:left;
 animation:animate 2s linear infinite;
}
span:before
{
 content:'';
 position:absolute;
 width:16px;
 height:16px;
 border-radius:50%;
 background:#fff000;
 top:-6px;
 right:-8px;
 box-shadow:0 0 20px #fff000;
}
@keyframes animateC
{
 0%
 {
  transform:rotate(0deg);
 }
 100%
 {
  transform:rotate(360deg);
 }
}
@keyframes animate
{
 0%
 {
  transform:rotate(45deg);
 }
 100%
 {
  transform:rotate(405deg);
 }
}

 </style>
</head>
<body>
 

<div class="ring">Loading
 <span></span>
</div>

</body>
</html>

Output

How to Make a Simple Loading Animation in CSS

There are some easy steps by which we can create a simple loading animation for our webpage.

1. HTML structure:

In the first step, we have to create the webpage structure for the animation. The code for the HTML is as below.

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>
   
<link rel="stylesheet" href="styles.css">
</head>
<body>
   
<div class="loader-container">
       
<div class="loader"></div>
   
</div>
</body>
</html>

2. CSS style:

After creating the HTML structure, we must go to the next step. In the next step, we have to provide some style with the help of 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;
    }
}

Combining both codes will make the complete code look like the one 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>
 <style>
  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;
  }
}

 </style>
</head>
<body>
 <div class="loader-container">
   <div class="loader"></div>
 </div>
</body>
</html>

Output

CSS Loading Animation Best Practices

When we are creating the loading animation, we should be very careful. There are some tips for creating the CSS loading animation.

The best-loading animations take the least amount of time. When we create the loading animation, the user has some patience if it lasts too long. The developer must remember that the animation should take as little as possible. After doing this, the user will appreciate the fast loading time.

Ease the pain of waiting.

The wait will be less agonizing if the developer wants to provide some interesting thing on his web page. This animation will attract attention, and it will keep the user busy.

Your animation is part of your brand.

There are better places for a marketing campaign than this one, but keeping the logo on the brand is recommended.

Let the user know the reason for the wait.

The main purpose of the loading animation is to reduce the user's waiting time. So, to reduce the boringness of the user, we should not go for simple statements like, "Please wait while we get you set up" or "Wait a moment while we fetch your newly created document.

Next TopicCSS units

← prev next →