Simple Loading CSS Animation

The animated graphic that users see while waiting for content to load on a website is called a website loader or loading animation. Different types of loaders are seen on different websites these days. Some of these are spinner loaders, bar loaders, pulse loaders, bouncing letter loaders, or any other kind of custom loader. These CSS loaders have only one purpose and that is to keep the visitors engaged during the time it takes to load the website content. The user will not be disturbed and patiently wait for the content to load. Today we will share with you a CSS loader animation snippet that bounces the letters of the word 'loading'. We know that many creative animations can be made with CSS keyframes animation. This CSS loader is a part of that. The video tutorial below shows the step-by-step process of creating this CSS animation example snippet.

When content is being retrieved from the server or an action is being processed, visitors get confused as to what is going on. This loader animation signals the progress of the loading process to the user. Animations created with CSS keyframes provide a pleasant and stable experience to users. That is why we have used CSS Keyframes animation to make our CSS loader.

You May Also Like:

First, each letter of the word 'loading' and the accompanying three dots are taken within ten span tags. This is done because each letter and dot will be animated separately. In CSS, first, the container divs are taken to the center of the viewport using the CSS flexbox grid. Initially, the span elements will align vertically. So 'display: inline-block' is taken to bring the span elements side by side. An animation property is then set which will animate each span element via keyframes. Each span element is given a different 'animation-delay' value so that they animate slightly later than animate together.

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creative Page Loading Animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <div class="container">
        <div class="loader"> 
          <span>L</span>
          <span>o</span>
          <span>a</span>
          <span>d</span>
          <span>i</span>
          <span>n</span>
          <span>g</span>
          <span>.</span>
          <span>.</span>
          <span>.</span>
        </div>
    </div>
</body>
</html>

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #000;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}
.loader {
    font-size: 40px;
    font-weight: bold;
    display: inline-block;
    font-family: bebas neue;
}
.loader span {
    display: inline-block;
    color: #0072ff;
    animation: bounce 1.5s infinite alternate;
}
.loader span:nth-child(2) {
    animation-delay: 0.1s;
}
.loader span:nth-child(3) {
    animation-delay: 0.2s;
}
.loader span:nth-child(4) {
    animation-delay: 0.3s;
}
.loader span:nth-child(5) {
    animation-delay: 0.4s;
}
.loader span:nth-child(6) {
    animation-delay: 0.5s;
}
.loader span:nth-child(7) {
    animation-delay: 0.6s;
}
.loader span:nth-child(8) {
    animation-delay: 0.7s;
}
.loader span:nth-child(9) {
    animation-delay: 0.8s
}
.loader span:nth-child(10) {
    animation-delay: 0.9s;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0)
    }
    40% {
        transform: translateY(-50px)
    }
    60% {
        transform: translateY(-25px);
    }
}

For the Original Post CLICK HERE

Blog

Simple Loading CSS Animation

Divinector

Join Our Newsletter. No Spam, Only the good stuff.

Related