CSS loader | Bouncing cube loader

CSS loaders are very useful when it comes to user feedback. No one wants to look at the boring old “Loading…” text. Instead of using text to show loading, use animated cool-looking CSS loaders.

In this article, we will learn to create an eye-catching Bouncing cube loader using CSS. This loader is purely created in CSS and HTML.

Bouncing cube CSS loader codepen

Also, Read- CSS underline text on hover with animation

How to create a bouncing CSS cube loader?

To create a bouncing cube we first need to create a cube and then animate it. Creating a cube in CSS is simple but tricky.

How to create a cube in CSS?

A cube is made of 6 faces or rectangles. The below code creates a cube in CSS.

Let’s create a cube with a shadow

Html:

<div class="cube">
  <div class="cube-faces">
    <div class="cube-face shadow"></div>
    <div class="cube-face bottom"></div>
    <div class="cube-face top"></div>
    <div class="cube-face left"></div>
    <div class="cube-face right"></div>
    <div class="cube-face back"></div>
    <div class="cube-face front"></div>
  </div>
</div>

CSS:

body {
  background-color: #ff8484ff;
  height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
}

.cube {
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateZ(45deg);
  animation: rotation 2s infinite;
}

.cube-faces {
  transform-style: preserve-3d;
  height: 80px;
  width: 80px;
  position: relative;
  transform-origin: 0 0;
  transform: translateX(0) translateY(0) translateZ(-40px);
}

.cube-face {
  position: absolute;
  inset: 0;
  background: #110d31ff;
  border: solid 1px #ff8484ff;
}
.cube-face.shadow {
  transform: translateZ(-80px);
  animation: bouncing-shadow 2s infinite;
}
.cube-face.top {
  transform: translateZ(80px);
}
.cube-face.front {
  transform-origin: 0 50%;
  transform: rotateY(-90deg);
}
.cube-face.back {
  transform-origin: 0 50%;
  transform: rotateY(-90deg) translateZ(-80px);
}
.cube-face.right {
  transform-origin: 50% 0;
  transform: rotateX(-90deg) translateY(-80px);
}
.cube-face.left {
  transform-origin: 50% 0;
  transform: rotateX(-90deg) translateY(-80px) translateZ(80px);
}

Here we have created a cube with a shadow using some div tags and transform property.

Note: Since we can’t see the bottom face of the cube, it’s optional.

CSS cube codepen

See the Pen CSS cube by Rare Programmer (@rareprogrammer) on CodePen.

Add bouncing and rotating animation to cube using CSS

To add bouncing and rotation animation we can use the keyframes in CSS.

Here is the full HTML and CSS code

Html:

<div class="scene">
  <div class="cube-wrapper">
    <a href="https://www.rareprogrammer.com/bouncing-cube-css-loader">
      <div class="cube">
        <div class="cube-faces">
          <div class="cube-face shadow"></div>
          <div class="cube-face bottom"></div>
          <div class="cube-face top"></div>
          <div class="cube-face left"></div>
          <div class="cube-face right"></div>
          <div class="cube-face back"></div>
          <div class="cube-face front"></div>
        </div>
      </div>
    </a>
  </div>
</div>

CSS:

* {
  font-family: "Albert Sans", sans-serif;
  font-size: inherit;
}

body {
  background-color: #ff8484ff;
  height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
}

.scene {
  position: relative;
  z-index: 2;
  height: 220px;
  width: 220px;
  display: grid;
  place-items: center;
}

.cube-wrapper {
  transform-style: preserve-3d;
  animation: bouncing 2s infinite;
}

.cube {
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateZ(45deg);
  animation: rotation 2s infinite;
}

.cube-faces {
  transform-style: preserve-3d;
  height: 80px;
  width: 80px;
  position: relative;
  transform-origin: 0 0;
  transform: translateX(0) translateY(0) translateZ(-40px);
}

.cube-face {
  position: absolute;
  inset: 0;
  background: #110d31ff;
  border: solid 1px #ff8484ff;
}
.cube-face.shadow {
  transform: translateZ(-80px);
  animation: bouncing-shadow 2s infinite;
}
.cube-face.top {
  transform: translateZ(80px);
}
.cube-face.front {
  transform-origin: 0 50%;
  transform: rotateY(-90deg);
}
.cube-face.back {
  transform-origin: 0 50%;
  transform: rotateY(-90deg) translateZ(-80px);
}
.cube-face.right {
  transform-origin: 50% 0;
  transform: rotateX(-90deg) translateY(-80px);
}
.cube-face.left {
  transform-origin: 50% 0;
  transform: rotateX(-90deg) translateY(-80px) translateZ(80px);
}

@keyframes rotation {
  0% {
    transform: rotateX(45deg) rotateY(0) rotateZ(45deg);
    animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
  }
  50% {
    transform: rotateX(45deg) rotateY(0) rotateZ(225deg);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
  }
  100% {
    transform: rotateX(45deg) rotateY(0) rotateZ(405deg);
    animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
  }
}
@keyframes bouncing {
  0% {
    transform: translateY(-40px);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
  }
  45% {
    transform: translateY(40px);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }
  100% {
    transform: translateY(-40px);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
  }
}
@keyframes bouncing-shadow {
  0% {
    transform: translateZ(-80px) scale(1.3);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
    opacity: 0.05;
  }
  45% {
    transform: translateZ(0);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 0.3;
  }
  100% {
    transform: translateZ(-80px) scale(1.3);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
    opacity: 0.05;
  }
}

And it’s done.

The source code is available on Github.

If you find this article helpful then please share it with your friends.