CSS Animation Examples With Source Code | Ripple Grid CSS Loader

Last Updated: 2025-09-02 14:14:41

The Ripple Grid CSS Loader is a vibrant and engaging loading animation created entirely with CSS. This loader features a 3x3 grid of cells that light up sequentially in a ripple effect, giving your website or application a modern and dynamic loading indicator. Each cell transitions between transparent and bright colors, creating an appealing wave-like motion that is visually smooth and responsive.

This loader is lightweight, fully CSS-based, and requires no JavaScript, making it easy to integrate into any web project. It can be customized by adjusting the cell size, spacing, colors, or animation speed to match your design requirements. You can download the complete source code.

Source Code Explanation

Here’s a detailed breakdown of the main parts of this CSS loader:

◈ Loader Container (.loader) – Sets up the grid structure using CSS variables for size, spacing, and total dimensions. Flexbox ensures the cells wrap correctly.

◈ Cell Styling (.cell) – Defines the size, margin, rounded corners, and initial transparent background. This is the base for the ripple animation.

◈ Cell Animation (.cell animation) – Applies the ripple effect to each cell using the animation property with duration, easing, and infinite looping.

◈ Animation Delay (.cell.d-1 to .cell.d-4) – Staggers the animation timing of different cells to create a smooth ripple wave effect across the grid.

◈ Cell Colors (nth-child) – Assigns unique colors to each of the 9 cells using CSS custom properties (--cell-color), ensuring visual variation during the animation.

◈ CSS Variables (--cell-size, --cell-spacing, --cells, --total-size) – Allows easy customization of the grid size, spacing, and total container size for flexible design.

◈ Flexbox Layout (display: flex; flex-wrap: wrap) – Ensures that cells wrap naturally into a square grid and stay perfectly aligned within the container.

◈ Box-Sizing (box-sizing: border-box) – Ensures margins and borders do not affect the final size of each cell, keeping the grid uniform.

◈ Border Radius (border-radius: 4px) – Gives each cell slightly rounded corners for a softer, modern appearance.

◈ Keyframes Animation (@keyframes ripple) – Controls the color transition of each cell from transparent to the assigned color and back to transparent, creating the continuous ripple effect.

.loader {
  --cell-size: 52px;
  --cell-spacing: 1px;
  --cells: 3;
  --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));
  display: flex;
  flex-wrap: wrap;
  width: var(--total-size);
  height: var(--total-size);
}

.cell {
  flex: 0 0 var(--cell-size);
  margin: var(--cell-spacing);
  background-color: transparent;
  box-sizing: border-box;
  border-radius: 4px;
  animation: 1.5s ripple ease infinite;
}

.cell.d-1 { animation-delay: 100ms; }
.cell.d-2 { animation-delay: 200ms; }
.cell.d-3 { animation-delay: 300ms; }
.cell.d-4 { animation-delay: 400ms; }

.cell:nth-child(1) { --cell-color: #00FF87; }
.cell:nth-child(2) { --cell-color: #0CFD95; }
.cell:nth-child(3) { --cell-color: #17FBA2; }
.cell:nth-child(4) { --cell-color: #23F9B2; }
.cell:nth-child(5) { --cell-color: #30F7C3; }
.cell:nth-child(6) { --cell-color: #3DF5D4; }
.cell:nth-child(7) { --cell-color: #45F4DE; }
.cell:nth-child(8) { --cell-color: #53F1F0; }
.cell:nth-child(9) { --cell-color: #60EFFF; }

@keyframes ripple {
  0% { background-color: transparent; }
  30% { background-color: var(--cell-color); }
  60% { background-color: transparent; }
  100% { background-color: transparent; }
}

You can download the complete source code.

 

The Ripple Grid CSS Loader is a modern, lightweight, and fully CSS-based loader that enhances the user experience with smooth ripple animations. It is easy to customize, visually engaging, and a great example of css animation examples with source code. Implement it in your project to make loading states more dynamic and attractive.