Hologram Hub Loader Animation with HTML and CSS @rayen-code

Rayen

In the ever-evolving landscape of web design, futuristic and engaging loaders can set your website apart. This tutorial explores the creation of a mesmerizing hologram hub loader animation using HTML and CSS. Elevate your website's loading experience with this futuristic and visually captivating effect that adds a touch of sci-fi charm.




Step 1: HTML Markup:

Initiate the tutorial by setting up the HTML structure for your hologram hub loader. Create a container for the loader and divide it into sections that will form the holographic display.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HOLOGRAM: ANIMATION</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="ring r01"></div>
        <div class="ring r02"></div>
        <div class="ring r03"></div>
        <div class="ring r04"></div>
        <div class="ring r051"></div>
        <div class="ring r052"></div>
        <div class="ring r06"></div>
        <div class="ring r07"></div>
        <div class="ring r08"></div>
        <div class="ring r09"></div>
    </div>
</body>
</html>

Step 2: Styling with CSS:

Create a dedicated CSS file (style.css) to apply the hologram hub loader styles and animations. Utilize CSS keyframes to orchestrate the holographic projections.
/*-------------------- CSS --------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #212121;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 300px;
    /* border: 1px solid wheat; */
    transition: 0.5s ease;
    transform-style: preserve-3d;
    user-select: none;
    cursor: crosshair;
}
.container:hover {
    transform: rotateX(45deg) rotateY(-30deg) scale(1.3);
}

.container .ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    
    mask: radial-gradient(#0000 var(--i), #000 var(--i), #000 var(--o), #0000 var(--o));

    transition: 0.3s;
}

.container .r01 {
    background: conic-gradient(#0ff 100%, #0000 100%) ;
    --i: 70%;
    --o: 71%;
}


.container .r02 {
    background: conic-gradient(
        #0ff 05%, #0000 05%, #0000 9% , #0ff 09%,
        #0ff 20%, #0000 20%, #0000 25% , #0ff 25%,
        #0ff 37%, #0000 37%, #0000 42% , #0ff 42%,
        #0ff 49%, #0000 49%, #0000 55% , #0ff 55%,
        #0ff 65%, #0000 65%, #0000 72% , #0ff 72%,
        #0ff 80%, #0000 80%, #0000 86% , #0ff 86%,
        #0ff 95%, #0000 95%
        ) ;
    --i: 57%;
    --o: 60%;

    animation: anime 7s ease-in-out infinite alternate;
}
.container:hover .r02 {
    transform: translateZ(50px);
}

.container .r03 {
    background: conic-gradient(#ffd000 85%, #0000 85%) ;
    --i: 50%;
    --o: 50.7%;

    animation: anime 3s ease-in-out infinite alternate;
}

.container .r04 {
    background: conic-gradient(
    #0000 35%, #0ff 35%,
    #0ff 40%, #0000 40%,

    #0000 67%, #0ff 67%,
    #0ff 71%, #0000 71%
    ) ;
    --i: 40%;
    --o: 44%;

    animation: anime 4s ease-in-out infinite alternate;
}

.container .r051 {
    background: conic-gradient(
        #0000 20%, #0ff 20%, #0ff 40%, #0000 40%,
    
        #0000 67%, #0ff 67%, #0ff 85%, #0000 85%
        ) ;
        --i: 39.5%;
        --o: 40%;

        animation: anime 4s ease-in-out infinite alternate;
}
.container .r052 {
    background: conic-gradient(
        #0000 20%, #0ff 20%, #0ff 40%, #0000 40%,
    
        #0000 67%, #0ff 67%, #0ff 85%, #0000 85%
        ) ;
        --i: 37.5%;
        --o: 38%;

        animation: anime 4s ease-in-out infinite alternate;
}

.container:hover .r04,
.container:hover .r051,
.container:hover .r052 {
    transform: translateZ(50px);
}

.container .r06 {
    background: conic-gradient(
        #0000 20%, #0ff 20%, #0ff 35%, #0000 35%,
    
        #0000 67%, #0ff 67%, #0ff 95%, #0000 95%
        ) ;
        --i: 30%;
        --o: 30.5%;

        animation: anime 2s ease-in-out infinite alternate;
}

.container .r07 {
    background: conic-gradient(#0ff 100%, #0000 100%) ;
    --i: 16%;
    --o: 17.3%;
}

.container .r08 {
    background: conic-gradient(#ffd000 75%, #0000 75%) ;
    --i: 10%;
    --o: 11%;

    animation: anime 5s ease-in-out infinite alternate;
}
.container .r09 {
    background: conic-gradient(#0ff 100%, #0000 100%) ;
    --i: 3%;
    --o: 3.4%;
}
.container:hover .r08,
.container:hover .r09 {
transform: translateZ(120px);
}

@keyframes anime {
    to {
        rotate: 360deg;
    }
}

Understand the transform-style properties in CSS. These properties are crucial for creating a 3D effect and preserving the 3D transformations.

Personalize the hologram hub loader by adjusting the size, color, and number of projections. Experiment with different rotation speeds to achieve the desired futuristic feel.


0 Comments