Creating Stunning Cubic Neon Preloaders with HTML, CSS
Published: 2023-05-28 11:06:30

## Introduction
A preloader is an essential element in web development that enhances the user experience by displaying a loading animation or graphic while the website's content is being loaded. It serves as a visual cue to inform visitors that the website is actively loading and prevents them from experiencing a blank or unresponsive page. 

Creating a preloader using HTML and CSS is a straightforward and effective way to add this feature to your website. With HTML, you can define the structure and layout of the preloader, while CSS allows you to style and animate it. By customizing the design and animation of the preloader, you can align it with your website's branding and create a visually appealing loading experience for your users.

Imagine two rotating cubes and a cuboid, elegantly arranged in parallel and glowing with neon animations against a sleek black background. This mesmerizing effect is achieved using HTML, CSS. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48o8ee6ccgbfrucpon3a.png)

## Implementation

```
<!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>Cubic Neon Preloader</title>
    <!--Google Fonts and Icons-->
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Foldit:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        width: 100%;
        height: 100vh;
        margin: 0;
        padding: 0;
      }
      .preloader {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: black;
      }
      .loader {
        width: fit-content;
        display: flex;
        align-items: flex-end;
        justify-content: center;
      }
      .box {
        width: 40px;
        height: 40px;
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      .cube-preloader {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
      }
      .side {
        position: absolute;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.3mm solid rgba(0, 15, 46, 0.7);
        background: linear-gradient(45deg, rgb(255, 0, 255), rgb(0, 255, 255));
        background-size: 400% 400%;
        animation: neon 2s ease-in-out infinite alternate;
      }
      @keyframes neon {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: 400% 400%;
        }
      }
      .front {
        transform: rotateY(0) translateZ(20px);
      }
      .back {
        transform: rotateY(180deg) translateZ(20px);
      }
      .left {
        transform: rotateY(-90deg) translateZ(20px);
      }
      .right {
        transform: rotateY(90deg) translateZ(20px);
      }
      .top {
        transform: rotateX(90deg) translateZ(20px);
      }
      .bottom {
        transform: rotateX(-90deg) translateZ(20px);
      }
      .box2 .front,
      .box2 .back,
      .box2 .right,
      .box2 .left {
        height: 120px;
      }
      .box2 .bottom {
        transform: rotateX(-90deg) translateZ(100px);
      }
      .box2 .cube-preloader {
        width: 40px;
        height: 120px;
        transform: rotateX(-45deg) rotateY(-45deg);
      }
      .box2 {
        height: 120px;
      }
      .box1 {
        align-self: flex-start;
      }
      .box1 .cube-preloader {
        transform: rotateX(-45deg) rotateY(-45deg) translateZ(-15px)
          translateY(-5px);
      }
      .box3 .cube-preloader {
        transform: rotateX(-45deg) rotateY(-45deg) translateZ(15px)
          translateY(0px);
      }

      @keyframes animate1 {
        0% {
          transform: rotateX(-45deg) rotateY(-45deg) translateZ(15px)
            translateY(0px);
        }
        10% {
          transform: rotateX(-45deg) rotateY(-45deg) translateZ(15px)
            translateY(0px);
        }
        25% {
          transform: rotateX(-45deg) rotateY(-135deg) translateZ(15px)
            translateY(20px);
        }
        35% {
          transform: rotateX(-45deg) rotateY(-135deg) translateZ(15px)
            translateY(20px);
        }
        50% {
          transform: rotateX(-45deg) rotateY(-225deg) translateZ(-15px)
            translateY(0px);
        }
        60% {
          transform: rotateX(-45deg) rotateY(-225deg) translateZ(-15px)
            translateY(0px);
        }
        75% {
          transform: rotateX(-45deg) rotateY(-315deg) translateZ(-18px)
            translateY(25px);
        }
        85% {
          transform: rotateX(-45deg) rotateY(-315deg) translateZ(-18px)
            translateY(25px);
        }
        100% {
          transform: rotateX(-45deg) rotateY(-405deg) translateZ(15px)
            translateY(0px);
        }
      }

      @keyframes animate2 {
        0% {
          transform: rotateX(-45deg) rotateY(-45deg);
        }
        10% {
          transform: rotateX(-45deg) rotateY(-45deg);
        }
        25% {
          transform: rotateX(-45deg) rotateY(45deg);
        }
        35% {
          transform: rotateX(-45deg) rotateY(45deg);
        }
        50% {
          transform: rotateX(-45deg) rotateY(135deg);
        }
        60% {
          transform: rotateX(-45deg) rotateY(135deg);
        }
        75% {
          transform: rotateX(-45deg) rotateY(225deg);
        }
        85% {
          transform: rotateX(-45deg) rotateY(225deg);
        }
        100% {
          transform: rotateX(-45deg) rotateY(315deg);
        }
      }

      @keyframes animate3 {
        0% {
          transform: rotateX(-45deg) rotateY(-45deg) translateZ(-15px)
            translateY(-3px);
        }
        10% {
          transform: rotateX(-45deg) rotateY(-45deg) translateZ(-15px)
            translateY(-3px);
        }
        25% {
          transform: rotateX(-45deg) rotateY(-135deg) translateZ(-15px)
            translateY(-25px);
        }
        35% {
          transform: rotateX(-45deg) rotateY(-135deg) translateZ(-15px)
            translateY(-25px);
        }
        50% {
          transform: rotateX(-45deg) rotateY(-225deg) translateZ(15px)
            translateY(-3px);
        }
        60% {
          transform: rotateX(-45deg) rotateY(-225deg) translateZ(15px)
            translateY(-3px);
        }
        75% {
          transform: rotateX(-45deg) rotateY(-315deg) translateZ(12px)
            translateY(-20px);
        }
        85% {
          transform: rotateX(-45deg) rotateY(-315deg) translateZ(12px)
            translateY(-20px);
        }
        100% {
          transform: rotateX(-45deg) rotateY(-405deg) translateZ(-15px)
            translateY(-3px);
        }
      }
      .box3 .cube-preloader {
        animation: animate1 4s linear infinite;
      }
      .box2 .cube-preloader {
        animation: animate2 4s linear infinite;
      }
      .box1 .cube-preloader {
        animation: animate3 4s linear infinite;
      }
      .text {
        font-family: poppins;
        font-size: 24px;
        letter-spacing: 2px;
        color: white;
        font-weight: 500;
      }
    </style>
  </head>
  <body>
    <div class="preloader">
      <div class="loader">
        <div class="box box1">
          <div class="cube-preloader">
            <div class="side front"></div>
            <div class="side back"></div>
            <div class="side right"></div>
            <div class="side left"></div>
            <div class="side top"></div>
            <div class="side bottom"></div>
          </div>
        </div>
        <div class="box box2">
          <div class="cube-preloader">
            <div class="side front"></div>
            <div class="side back"></div>
            <div class="side right"></div>
            <div class="side left"></div>
            <div class="side top"></div>
            <div class="side bottom"></div>
          </div>
        </div>
        <div class="box box3">
          <div class="cube-preloader">
            <div class="side front"></div>
            <div class="side back"></div>
            <div class="side right"></div>
            <div class="side left"></div>
            <div class="side top"></div>
            <div class="side bottom"></div>
          </div>
        </div>
      </div>
      <div class="text">Loading...</div>
    </div>
  </body>
</html>

```
 [Checkout the video for step by step implementation:](https://youtu.be/chkcd11okxc)