Home
CSS
HTML

Crafting 3D Cube Loader using HTML and CSS

3D Cube Loader | Coding Zemigle

Creating a 3D Rotating Cube Loader using HTML and CSS is a popular approach to enhance the user experience while they wait for content to load. This article will walk you through the steps to create a visually appealing 3D rotating cube loader, using pure HTML and CSS. Let’s dive in!

Loaders are visual cues or animations that indicate content is being loaded. They’re essential for keeping users engaged during wait times. A 3D rotating cube effect is particularly attractive, as it combines modern design with interactive animation, making it more engaging than a static spinner.


Step 1: Setting up the HTML Structure

Our HTML structure will contain a simple div element with multiple nested divs to create each face of the cube. Each face will be rotated to form a 3D shape.

Here's the HTML code:

✲    index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>3D Cube Loader | Coding Zemigle</title>
</head>
<body>
  <div class="container">
  <div class="loader">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
  </div>
  </div>
</body>
</html>



.cube-loader is the container for the animation.

.cube is the cube itself.

Each .face represents one face of the cube.


Step 2: CSS Styling and Animation

In the CSS file (styles.css), we’ll style the cube, apply 3D transformations, and animate it.

✲    style.css
.container {
  display: auto;
  justify-content: center;
  margin: 0;
}

.loader {
  display: grid;
  grid-template-columns: repeat(2, 50px);
  grid-template-rows: repeat(2, 50px);
  gap: 10px;
  perspective: 1000px;
}

.cube {
  width: 50px;
  height: 50px;
  background-color: #61dafb;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 1.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube:nth-child(1) {
  animation-delay: 0s;
}
.cube:nth-child(2) {
  animation-delay: 0.2s;
}
.cube:nth-child(3) {
  animation-delay: 0.4s;
}
.cube:nth-child(4) {
  animation-delay: 0.6s;
}



The perspective property in .cube-loader creates a 3D effect by simulating depth.

transform-style: preserve-3d keeps each .face in a 3D space.

@keyframes rotate animates the cube, creating a smooth rotation.

Conclusion

You’ve now created a 3D rotating cube loader using pure HTML and CSS! This loader is visually appealing, modern, and effective for providing a loading indicator on your website. You can further customize it with different colors, sizes, or animations to fit your site’s style.

Experiment with different CSS properties to explore other effects, and enjoy adding this stylish 3D loader to your projects!