Bouncing cube CSS loader
Bouncing cube CSS loader
  • Post author:
  • Post category:Uncategorized
  • Reading time:8 mins read
  • Post published:July 15, 2022
  • Post comments:0 Comments
  • Post last modified:July 20, 2022

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

See the Pen Bouncing Cube Loader by Rare Programmer (@rareprogrammer) on CodePen.

Table of Contents

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.

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply