Loaders

CSS Bouncing Ball Loader

A clean CSS-only bouncing ball loader on a dark background, perfect for indicating loading states in modern web interfaces.

By Ishrafil Khan Updated June 2026 Bokaro Steel City, India

CSSAnimationLoader

Live Preview

HTML + CSS + JS

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bouncing Ball Loader</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: #1a1a2e;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      font-family: sans-serif;
    }

    .loader {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      height: 80px;
    }

    .ball {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: linear-gradient(145deg, #e94560, #ff6348);
      box-shadow: 0 5px 15px rgba(233, 69, 96, 0.4);
      animation: bounce 0.6s ease-in-out infinite;
    }

    /* Different colors for each ball */
    .ball:nth-child(1) {
      background: linear-gradient(145deg, #e94560, #ff6348);
      box-shadow: 0 5px 15px rgba(233, 69, 96, 0.4);
    }

    .ball:nth-child(2) {
      background: linear-gradient(145deg, #0f3460, #16213e);
      box-shadow: 0 5px 15px rgba(15, 52, 96, 0.4);
      animation-delay: 0.1s;
    }

    .ball:nth-child(3) {
      background: linear-gradient(145deg, #f5c518, #f5a623);
      box-shadow: 0 5px 15px rgba(245, 197, 24, 0.4);
      animation-delay: 0.2s;
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-30px);
      }
    }
  </style>
</head>
<body>
  <div class="loader">
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
  </div>
</body>
</html>

This loader uses a series of colored balls that bounce sequentially, creating a lively and engaging loading indicator. The dark background ensures high contrast, making it ideal for dark-themed websites or loading screens.

How it works

The animation is driven by CSS keyframes that translate the balls vertically, with a staggered delay applied to each ball to create a cascading effect. Each ball is styled with a gradient and shadow for a polished, modern look. The entire animation runs infinitely using the infinite keyword.

How to use it

Copy the HTML and CSS into your project.
Place the loader inside any container where you need a loading state.
Customize the ball colors, size, or animation speed by editing the CSS variables or properties.
No JavaScript is required; the animation is entirely CSS-based.

Free to use under the MIT license. Built by Ishrafil Khan — need a custom build?

More snippets

Navigation

Pure CSS Hamburger Menu Morph to X

Backgrounds

Immersive Starfield Background Animation