Morphing Cube Loader UI using HTML and CSS

By Faraz - May 27, 2025

Learn how to create a smooth morphing cube loader using HTML and CSS. Simple step-by-step tutorial for beginners to enhance your UI with animation.

Join us on Telegram

Read Also Create a Stunning Bank Dashboard Concept using HTML & CSS (Source Code).jpg

Create a Stunning Bank Dashboard using HTML & CSS (Source Code)

A morphing cube loader is a fun and modern UI element that gives a smooth loading experience for websites and apps. It catches the user’s eye while they wait for content to load. You can make it using just HTML and CSS, with no JavaScript needed.

In this blog, we’ll guide you to create a beautiful morphing cube loader from scratch using easy steps. No coding experience? No problem!

Prerequisites

Before we start, here’s what you need:

Basic knowledge of HTML and CSS
A simple text editor like VS Code, Notepad++, or Sublime Text
A web browser (Chrome, Firefox, etc.)

Source Code

Step 1 (HTML Code):

To get started, we first need to create a basic HTML file. In this file, we will include the main structure for our loader. Let’s break down the HTML code:

`<!DOCTYPE html>`

Declares the document type and version of HTML (HTML5).

`<html lang="en">`

Starts the HTML document.
lang="en" specifies the language as English.

`<head>`...`</head>`

This is where metadata and external resources are included.

1. <meta charset="UTF-8">

Sets character encoding to UTF-8 (supports most characters from all languages).

2. <meta http-equiv="X-UA-Compatible" content="IE=edge">

Tells Internet Explorer to use the latest rendering engine.

3. <meta name="viewport" content="width=device-width, initial-scale=1.0">

Ensures responsive design by setting the viewport to match the device width.

4. <title>Document</title>

Sets the title of the web page (seen on the browser tab).

5. <link rel="stylesheet" href="styles.css">

Links an external CSS file (styles.css) to style the page.

`<body>`...`</body>`

This is the visible part of the web page.

<div class="cube-loader">

A container div is used to animate a 3D cube loader.

Inside it, there are 6 faces of a cube:

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

Each div represents one side of the cube (front, back, right, left, top, bottom).
The cube-face class is common to all and probably handles shared styles like size and position.
The front, back, etc., classes are used to individually position each face.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Morphing Cube Loader</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="cube-loader">
      <div class="cube-face front"></div>
      <div class="cube-face back"></div>
      <div class="cube-face right"></div>
      <div class="cube-face left"></div>
      <div class="cube-face top"></div>
      <div class="cube-face bottom"></div>
    </div>
</body>
</html>

Read Also create-notification-toasts-using-html-css-and-javascript.webp

Create Notification Toasts Using HTML, TailwindCSS, and JavaScript

Step 2 (CSS Code):

Once the basic HTML structure of the loader is in place, the next step is to add styling to the loader using CSS. Let’s break down the CSS code:

body Styling

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  height: 100vh;
}

display: flex: Uses Flexbox to center content.
align-items: center: Vertically centers the cube.
justify-content: center: Horizontally centers the cube.
padding: 0; margin: 0: Removes default spacing.
height: 100vh: Makes the body take full viewport height.

This setup ensures the cube appears right in the center of the page.

.cube-loader

.cube-loader {
  position: relative;
  width: 60px;
  height: 60px;
  transform-style: preserve-3d;
  animation: cubeRotate 3s linear infinite;
}

position: relative: Needed so the cube faces can be positioned absolutely inside it.
width, height: Sets the size of the cube.
transform-style: preserve-3d: Keeps the 3D transform effects on child elements.
animation: Spins the cube endlessly using the @keyframes cubeRotate.

.cube-face

.cube-face {
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  border: 2px solid rgba(255, 255, 255, 0.3);
  opacity: 0.8;
}

position: absolute: Places the cube faces inside the .cube-loader.
background: A diagonal gradient for a colorful look.
border: Light border with transparency for a glowing cube effect.
opacity: 0.8: Slight transparency.

Each face will use this style, then be rotated and placed in 3D space.

Cube Face Positioning

Each face is placed in 3D space by rotating and moving it 30px outward along the Z-axis.

.front

transform: rotateY(0deg) translateZ(30px);

Sits on the front face.

.back

transform: rotateY(180deg) translateZ(30px);

Sits on the back.

.right

transform: rotateY(90deg) translateZ(30px);

Sits on the right side.

.left

transform: rotateY(-90deg) translateZ(30px);

Sits on the left side.

.top

transform: rotateX(90deg) translateZ(30px);

Sits on top.

.bottom

transform: rotateX(-90deg) translateZ(30px);

Sits at the bottom.

translateZ(30px) pushes the face 30 pixels outward from the center of the cube.

Cube Animation

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

Defines a continuous 3D rotation around both X and Y axes.
The cube spins 360 degrees in both directions over 3 seconds (3s linear infinite).

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  height: 100vh;
}

.cube-loader {
  position: relative;
  width: 60px;
  height: 60px;
  transform-style: preserve-3d;
  animation: cubeRotate 3s linear infinite;
}

.cube-face {
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  border: 2px solid rgba(255, 255, 255, 0.3);
  opacity: 0.8;
}

.front {
  transform: rotateY(0deg) translateZ(30px);
}
.back {
  transform: rotateY(180deg) translateZ(30px);
}
.right {
  transform: rotateY(90deg) translateZ(30px);
}
.left {
  transform: rotateY(-90deg) translateZ(30px);
}
.top {
  transform: rotateX(90deg) translateZ(30px);
}
.bottom {
  transform: rotateX(-90deg) translateZ(30px);
}

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

Final Output:

Read Also create-meme-generator-using-html-css-and-javascript.webp

Create Meme Generator Using HTML, CSS, and JavaScript

Conclusion:

Creating a morphing cube loader using HTML and CSS is super easy. It’s a great way to add a cool touch to your website’s UI. This loader grabs attention and improves user experience, especially when pages or data are loading.

No JavaScript is needed – just pure HTML and CSS magic. Try customizing the colors and shapes to match your website's theme!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create morphing cube loader using html and css, cube loader animation html css tutorial, step by step morphing loader with html css, animated ui component using html and css, simple css cube animation tutorial, cube loader, html css animation, ui component, css loaders, css animation

End of the article

Latest Components

Event / Conference Website Template with HTML, CSS, JavaScript

by Faraz - June 17, 2025

Learn how to create a modern event or conference website template using HTML, CSS, and JavaScript. Simple steps with free code for your event website.