Simple Loading CSS Animation

Posted by

In web development, providing visual feedback to users during loading processes is essential for a smooth and engaging user experience. One effective way to achieve this is by using CSS animations to create loading spinners or progress indicators. In this tutorial, we’ll walk through the process of creating a simple loading animation using CSS.

HTML Structure

<!DOCTYPE html>
<html lang="en">
  
<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>

CSS Styles

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);
    }
}

Output:-

Hopefully, It will help you …!!!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x