CSS Bouncing Loader Animation with Source Code

CSS Bouncing Loader Animation with Source Code
May 19, 2022

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">
    <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>
        <div class="circle1 loader-div "></div>
        <div class="circle2 loader-div "></div>
        <div class="circle3 loader-div "></div>

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%.

Resources for You

ChatGPT Guide For Software Developers

Learn to use ChatGPT to stay ahead of competition

Front-End Developer Interview Kit

Today, Start preparing to get your dream job!

JavaScript Developer Kit

Start your JavaScript journey today!

Are you looking for Front-end Developer Job?

Get Front-end Interview Kit Now, And Be Prepared to Get Your Dream Job

Get Front-end Interview Kit

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates