Cube Loader Animation with HTML & CSS

Have you ever stared at a boring loading bar, willing it to move faster? We've all been there. But what if your website could captivate users with a visually engaging animation while things load in the background? Enter the animated cube loader!

This step-by-step guide will walk you through creating a sleek and dynamic animated cube loader using HTML and CSS. This project is part of my #100DaysOfCode challenge, and it's a fantastic way to practice your front-end development skills while building something genuinely cool.

Ready to dive in? Let's get started!

Step 1: Download the Starter Code (Optional)

To jump-start your project, you can download the pre-written HTML and CSS code for the animated cube loader. This is a great way to see the structure and get a feel for how everything works together.

Download the source code here: Source Code

Step 2: Setting Up the HTML Structure

The HTML code provides the basic building blocks for the animation. We'll use a series of div elements to create the container for the cubes and then define individual div elements for each cube itself. Within each cube element, we'll have child div elements representing the six faces of the cube.

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Metadata and linking CSS file -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Animated Cube Loader</title>
</head>

<body>
    <!-- Container for the assembly of cubes -->

</body>

</html>

    <div class="assembly">
        <!-- First set of 3D components (Inner Assembly) -->
        <div class="comp-3d comp-3d--i">
            <!-- Each cube has six faces, represented by divs with the class 'cube__face' -->
            <!-- First cube -->
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <!-- Additional cubes follow the same structure -->
            <!-- Cube 2 to Cube 18 (identical structure) -->
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
            <div class="cube">
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
                <div class="cube__face"></div>
            </div>
        </div>

        <!-- Second set of 3D components (Outer Assembly) -->
        <div class="comp-3d comp-3d--o">
            <!-- Each pos element contains one cube -->
            <!-- Position 1 -->
            <div class="pos">
                <div class="cube">
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                </div>
            </div>
            <!-- Additional positions follow the same structure -->
            <!-- Position 2 to Position 8 (identical structure) -->
            <div class="pos">
                <div class="cube">
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                </div>
            </div>
            <div class="pos">
                <div class="cube">
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                </div>
            </div>
            <div class="pos">
                <div class="cube">
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                </div>
            </div>
            <div class="pos">
                <div class="cube">
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                </div>
            </div>
            <div class="pos">
                <div class="cube">
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                </div>
            </div>
            <div class="pos">
                <div class="cube">
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                </div>
            </div>
            <div class="pos">
                <div class="cube">
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                    <div class="cube__face"></div>
                </div>
            </div>
        </div>
    </div>

Step 3: Adding Styles with CSS

The magic happens in the CSS! Here's a breakdown of some key aspects:

General Setup: We'll define styles for the body element, including preventing overflow, setting the height, and creating a perspective for the 3D effect.

/* General body settings to prevent overflow, remove margins, set height and perspective */
body {
    overflow: hidden;
    margin: 0;
    height: 100vh;
    perspective: 32em;
    /* Perspective distance for 3D effect */
    background-image: linear-gradient(to right, #434343 0%, black 100%);
    /* Background gradient */
}

/* General settings for all div elements to position absolutely and preserve 3D transformations */
div {
    position: absolute;
    transform-style: preserve-3d;
    /* Ensures child elements are transformed in 3D space */
}

Assembly and Animation: We'll style the main container and create animations for the inner and outer cube groups using keyframes.

/* Main assembly container centering and initial rotation */
.assembly {
    top: 50%;
    left: 50%;
    transform: rotateX(-45deg) rotateY(-45deg);
    /* Initial 3D rotation */
}

/* Common animation settings for 3D components */
.comp-3d {
    animation: r 2s ease-in-out infinite;
    /* Infinite animation with easing */
}

/* Specific animation name for inner assembly */
.comp-3d--i {
    animation-name: ri;
    /* Uses 'ri' keyframes */
}

/* Specific animation name for outer assembly */
.comp-3d--o {
    animation-name: ro;
    /* Uses 'ro' keyframes */
}

/* Keyframes for inner assembly rotation */
@keyframes ri {

    0%,
    20% {
        transform: rotateY(-0.5turn);
        /* Rotates -180 degrees on Y-axis */
    }

    50% {
        transform: none;
        /* No transformation at 50% */
    }

    100%,
    80% {
        transform: rotateX(-0.5turn);
        /* Rotates -180 degrees on X-axis */
    }
}

/* Keyframes for outer assembly rotation */
@keyframes ro {

    0%,
    35% {
        transform: rotate(-0.5turn);
        /* Rotates -180 degrees */
    }

    65%,
    100% {
        transform: none;
        /* No transformation at 65% and 100% */
    }
}

Cube Positioning: Each cube will be positioned in 3D space using scale3d and translate3d properties.

/* Transformations for cubes in different positions */
.pos:nth-child(1) {
    transform: scale3d(1, 1, 1) translate3d(4em, 4em, 4em);
}

:not(.pos)>.cube:nth-child(1) {
    transform: translate3d(-4em, -4em, 0em);
}

.pos:nth-child(2) {
    transform: scale3d(1, 1, -1) translate3d(4em, 4em, 4em);
}

:not(.pos)>.cube:nth-child(2) {
    transform: translate3d(-4em, 0em, -4em);
}

/* Transformations for other cubes (3-18) */
:not(.pos)>.cube:nth-child(3) {
    transform: translate3d(-4em, 0em, 0em);
}

:not(.pos)>.cube:nth-child(4) {
    transform: translate3d(-4em, 0em, 4em);
}

.pos:nth-child(3) {
    transform: scale3d(1, -1, 1) translate3d(4em, 4em, 4em);
}

:not(.pos)>.cube:nth-child(5) {
    transform: translate3d(-4em, 4em, 0em);
}

.pos:nth-child(4) {
    transform: scale3d(1, -1, -1) translate3d(4em, 4em, 4em);
}

:not(.pos)>.cube:nth-child(6) {
    transform: translate3d(0em, -4em, -4em);
}

:not(.pos)>.cube:nth-child(7) {
    transform: translate3d(0em, -4em, 0em);
}

:not(.pos)>.cube:nth-child(8) {
    transform: translate3d(0em, -4em, 4em);
}

:not(.pos)>.cube:nth-child(9) {
    transform: translate3d(0em, 0em, -4em);
}

:not(.pos)>.cube:nth-child(10) {
    transform: translate3d(0em, 0em, 0em);
}

:not(.pos)>.cube:nth-child(11) {
    transform: translate3d(0em, 0em, 4em);
}

:not(.pos)>.cube:nth-child(12) {
    transform: translate3d(0em, 4em, -4em);
}

:not(.pos)>.cube:nth-child(13) {
    transform: translate3d(0em, 4em, 0em);
}

:not(.pos)>.cube:nth-child(14) {
    transform: translate3d(0em, 4em, 4em);
}

.pos:nth-child(5) {
    transform: scale3d(-1, 1, 1) translate3d(4em, 4em, 4em);
}

:not(.pos)>.cube:nth-child(15) {
    transform: translate3d(4em, -4em, 0em);
}

.pos:nth-child(6) {
    transform: scale3d(-1, 1, -1) translate3d(4em, 4em, 4em);
}

:not(.pos)>.cube:nth-child(16) {
    transform: translate3d(4em, 0em, -4em);
}

:not(.pos)>.cube:nth-child(17) {
    transform: translate3d(4em, 0em, 0em);
}

:not(.pos)>.cube:nth-child(18) {
    transform: translate3d(4em, 0em, 4em);
}

.pos:nth-child(7) {
    transform: scale3d(-1, -1, 1) translate3d(4em, 4em, 4em);
}

:not(.pos)>.cube:nth-child(19) {
    transform: translate3d(4em, 4em, 0em);
}

.pos:nth-child(8) {
    transform: scale3d(-1, -1, -1) translate3d(4em, 4em, 4em);
}

/* Animation for cubes within 'pos' elements */
.pos .cube {
    animation: m 2s ease-out infinite;
    /* Infinite animation with easing */
}

Cube Faces: We'll style the individual faces of the cubes with dimensions, shadows, and background colors.

/* Styles for cube faces */
.cube__face {
    margin: -2em;
    width: 4em;
    height: 4em;
    box-shadow: 0 0 2em rgba(220, 220, 220, 0.5) inset;
    /* Inner shadow for depth effect */
    backface-visibility: hidden;
    /* Hides back face when rotated */
    background: rgb(222, 238, 253);
    /* Light blue background */
}

/* Slight brightness adjustment for even-numbered faces */
.cube__face:nth-child(2n) {
    filter: brightness(0.97);
}

/* Slight brightness increase for faces with index 5 and above */
.cube__face:nth-child(n + 5) {
    filter: brightness(1.03);
}

/* Transformations for positioning each face of the cube */
.cube__face:nth-child(1) {
    transform: rotateY(0deg) translateZ(2em);
    /* Front face */
}

.cube__face:nth-child(2) {
    transform: rotateY(90deg) translateZ(2em);
    /* Right face */
}

.cube__face:nth-child(3) {
    transform: rotateY(180deg) translateZ(2em);
    /* Back face */
}

.cube__face:nth-child(4) {
    transform: rotateY(270deg) translateZ(2em);
    /* Left face */
}

.cube__face:nth-child(5) {
    transform: rotateX(90deg) translateZ(2em);
    /* Top face */
}

.cube__face:nth-child(6) {
    transform: rotateX(-90deg) translateZ(2em);
    /* Bottom face */
}

Cube Movement Animation: Specific cubes can be animated to move within the assembly, adding a dynamic touch.

/* Keyframes for cube movement within 'pos' elements */
@keyframes m {

    0%,
    5%,
    95%,
    100% {
        transform: none;
        /* No transformation at start, 5%, 95%, and end */
    }

    15% {
        transform: translate3d(0, 4em, 0);
        /* Move up by 4em */
    }

    25% {
        transform: translate3d(0, 4em, 4em);
        /* Move up and forward by 4em */
    }

    35%,
    65% {
        transform: translate3d(4em, 4em, 4em);
        /* Move diagonally up, forward, and to the right */
    }

    75% {
        transform: translate3d(4em, 0, 4em);
        /* Move down to original height, forward and to the right */
    }

    85% {
        transform: translate3d(4em, 0, 0);
        /* Move back to original position */
    }
}

Step 4: Run It and Witness the Magic!

Once you've got your HTML and CSS files set up, open the HTML file in your web browser. You should see the animated cube loader in action! Feel free to experiment with the styles in the CSS file to customize the colors, dimensions, and animations to match your website's aesthetic.

Beyond the Basics:

This is just a starting point! You can further enhance your cube loader by:

Adding more complex animations for the cubes.
Incorporating different colors and gradients for a more vibrant look.
Including a loading message or progress bar for additional user feedback.

Connect with me

Don't hesitate to reach out! Feel free to contact me with any questions you have about this project or front-end development in general.

Connect with me: contact now

Happy Coding!

This blog post guides you through creating an animated cube loader, providing an engaging and informative way to showcase your coding journey as part of the #100DaysOfCode challenge. It also includes a call to action for readers to download the code or connect with you for further learning.

Enhance Your Website with a Beautiful Cube Loader Animation Using HTML & CSS

Improve Your Website's Look with Simple Cube Loader Animations Using HTML & CSS

Step 1: Download the Starter Code (Optional)

Step 2: Setting Up the HTML Structure

Step 3: Adding Styles with CSS

Step 4: Run It and Witness the Magic!

Beyond the Basics:

Connect with me

Happy Coding!

Enhance Your Website with a Beautiful Cube Loader Animation Using HTML & CSS

Improve Your Website's Look with Simple Cube Loader Animations Using HTML & CSS

Step 1: Download the Starter Code (Optional)

Step 2: Setting Up the HTML Structure

Step 3: Adding Styles with CSS

Step 4: Run It and Witness the Magic!

Beyond the Basics:

Connect with me

Happy Coding!

Did you find this article valuable?