Bouncing loaders are useful for those elements that load new content, such as articles, blog posts, and music files. Everyone is familiar with the bounce effect from YouTube videos or operating systems during loading screens. In this article, you'll learn how to create your own bouncing loader using pure CSS.
HTML Source Code for Bouncing Loader
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Loader Animation</title>
</head>
<body>
<div class="circle1 loader-div "></div>
<div class="circle2 loader-div "></div>
<div class="circle3 loader-div "></div>
</body>
</html>
CSS Source Code for Bouncing Loader
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #252525;
font-family: Arial, Helvetica, sans-serif;
}
.loader-div {
width: 30px;
height: 30px;
animation: bounce 1s 0.7s linear infinite;
border-radius: 100%;
margin: 10px;
}
.circle1 {
background-color: rgb(41, 186, 253);
}
.circle2 {
animation-delay: 0.2s;
background-color: rgb(237, 18, 197);
}
.circle3 {
animation-delay: 0.3s;
background-color: rgb(255, 234, 41);
}
@keyframes bounce {
0%, 50%, 100% {
transform: scale(1);
filter: blur(0px);
}
25% {
transform: scale(0.6);
}
75% {
transform: scale(1.4);
}
}
In the above example, we have taken 3 divs and added animation-delay to the second and first div. Then at last we have added the bounce effect by transforming divs at 0%,25%,75%, and 100%.