CSS Animation Examples | Phone Layered Morphing Box CSS Loader

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

Are you looking for a smooth, visually appealing loader for your website? This Phone Layered Morphing Box CSS Loader is a perfect choice for modern web projects. It features three layered boxes that change their shape and size seamlessly, creating a captivating morphing effect. Each box moves independently, giving a dynamic loading animation that grabs attention without being overwhelming.

The loader is fully centered in the browser window, making it compatible with any layout or device. Its colors are subtle yet stylish, and the animation is smooth, powered entirely by CSS without relying on JavaScript. You can easily integrate this loader into your project and customize its colors or sizes according to your needs. You can download the complete source code.

Source Code Explanation

Here’s a breakdown of the 10 main CSS parts of this loader and how they work:

◈ Body Centering: The body uses flexbox to center the loader both vertically and horizontally, ensuring it is always visible in the middle of the screen.

◈ Loader Base Styling: The first loader box is given a size, color, and border-radius to define its basic shape. It serves as the foundation for the animation.

◈ Loader Animation Declaration: The animation property assigns the keyframe sequence, duration, easing function, and infinite repetition to create the dynamic effect.

◈ Second Layer Styling: The second loader box is slightly smaller and a different color, layered above the first box using z-index to create depth.

◈ Third Layer Styling: The bottom box acts as a subtle accent. Its size and border-radius are modified to add variety and contrast during the animation.

◈ Keyframes for First Box: These keyframes define how the first box changes width, height, and position over time, producing the morphing effect.

◈ Keyframes for Second Box: Similar to the first box, this box’s keyframes create a synchronized yet distinct transformation, enhancing the overall animation.

◈ Keyframes for Third Box: The smallest box undergoes shape and size changes that complement the top layers, creating a smooth combined effect.

◈ Cubic Bezier Timing: The cubic-bezier easing is applied to the animations, making transitions smooth and visually natural instead of linear.

◈ Layer Synchronization: By offsetting keyframe stages for each layer, the animation feels organic, with each element moving slightly differently to mimic a fluid motion.

 

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1e3f57;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 160px;
  height: 100px;
  margin-left: -80px;
  margin-top: -50px;
  border-radius: 5px;
  background: #1e3f57;
  animation: dot1_ 3s cubic-bezier(0.55,0.3,0.24,0.99) infinite;
}

.loader:nth-child(2) {
  z-index: 11;
  width: 150px;
  height: 90px;
  margin-left: -75px;
  margin-top: -45px;
  border-radius: 3px;
  background: #3c517d;
  animation: dot2_ 3s cubic-bezier(0.55,0.3,0.24,0.99) infinite;
}

.loader:nth-child(3) {
  z-index: 12;
  width: 40px;
  height: 20px;
  margin-left: -20px;
  margin-top: 50px;
  border-radius: 0 0 5px 5px;
  background: #6bb2cd;
  animation: dot3_ 3s cubic-bezier(0.55,0.3,0.24,0.99) infinite;
}

@keyframes dot1_ {
  3%,97% { width: 160px; height: 100px; margin-top: -50px; margin-left: -80px; }
  30%,36% { width: 80px; height: 120px; margin-top: -60px; margin-left: -40px; }
  63%,69% { width: 40px; height: 80px; margin-top: -40px; margin-left: -20px; }
}

@keyframes dot2_ {
  3%,97% { width: 150px; height: 90px; margin-left: -75px; margin-top: -45px; }
  30%,36% { width: 70px; height: 96px; margin-left: -35px; margin-top: -48px; }
  63%,69% { width: 32px; height: 60px; margin-left: -16px; margin-top: -30px; }
}

@keyframes dot3_ {
  3%,97% { width: 40px; height: 20px; margin-left: -20px; margin-top: 50px; }
  30%,36% { width: 8px; height: 8px; margin-left: -5px; margin-top: 49px; border-radius: 8px; }
  63%,69% { width: 16px; height: 4px; margin-left: -8px; margin-top: -37px; border-radius: 10px; }
}

 You can download the complete source code.

 

This Layered Morphing Box CSS Loader is a clean, visually appealing, and fully CSS-based loader. It demonstrates how layering, keyframes, and easing functions can create dynamic animations without JavaScript. Ideal for modern web applications, it is lightweight, customizable, and easy to implement.