DEV Community

Cover image for Creating Stunning Cubic Neon Preloaders with HTML, CSS
SnippetsDevelop
SnippetsDevelop

Posted on

Creating Stunning Cubic Neon Preloaders with HTML, CSS

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

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>
Enter fullscreen mode Exit fullscreen mode

Checkout the video for step by step implementation:

Top comments (0)

Read next

serverspace profile image

Serverspace on board!

Serverspace.us -

veena10 profile image

Empowering Food Delivery Ventures with Open Source

Veena -

kiddiekottagelearning profile image

How do you ensure a supportive environment for student growth and development

kiddiekottagelearning -

georgealexander01 profile image

Elevate Your Wellness: Exploring CBG Isolate Powder

George Alexander -