Pulse cubes — CSS animation (Loaders) with ready HTML and CSS code

Preview

HTML + CSS

<div class="cube-pulse">
  <span></span><span></span><span></span><span></span>
</div>

<style>
.cube-pulse {
  display: grid;
  grid-template-columns: repeat(2, 22px);
  grid-template-rows: repeat(2, 22px);
  gap: 8px;
  width: max-content;
}
.cube-pulse span {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #5b8def, #9a6bff);
  box-shadow: 0 10px 30px rgba(91, 141, 239, 0.28);
  animation: cube-pulse 1.2s ease-in-out infinite;
}
.cube-pulse span:nth-child(2){animation-delay:.1s;}
.cube-pulse span:nth-child(3){animation-delay:.2s;}
.cube-pulse span:nth-child(4){animation-delay:.3s;}
@keyframes cube-pulse {0%,100%{transform:scale(.9);opacity:.85;}50%{transform:scale(1.15);opacity:1;}}
</style>

What the Pulse cubes pattern demonstrates

Pulse cubes is a reusable CSS animation pattern that can be integrated into modern UI without external dependencies. The example includes HTML structure and motion styles that are easy to scale for production components.

When this animation pattern is a good fit

Use this effect for state indication, visual focus, or lightweight micro-interactions that support content clarity. Motion should reinforce hierarchy, so keep speed, contrast, and density aligned with your interface goals.

How to implement it in production safely

Copy the snippet, adapt spacing and timing to your system tokens, and test behavior on mobile and low-power devices. Add reduced-motion support to keep the component accessible while preserving the same functional meaning.

Related animation examples

Triple spinner Line dance Dashed ring Beam sweep Stack bounce Clock loader