Advanced Loader Animation | HTML, CSS & JavaScript

<h2 class="section-title">
            1. Neon Ring Loader
        </h2>

<div class="card-label">PREVIEW</div>

</div>

<h2 class="section-title">
            2. Morphing Shape Loader
        </h2>

<div class="card-label">PREVIEW</div>

</div>

<h2 class="section-title">
            3. Liquid Wave Loader
        </h2>

<div class="card-label">PREVIEW</div>

</div>

<h2 class="section-title">
            4. Orbit Dot Loader
        </h2>

<div class="card-label">PREVIEW</div>

</div>

<h2 class="section-title">
            5. Futuristic Bar Loader
        </h2>

<div class="card-label">PREVIEW</div>

</div>

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

body {
            background: #020617;
            color: white;
            padding: 40px;
        }

.main-title {
            text-align: center;
            font-size: 42px;
            margin-bottom: 60px;
            color: #00f7ff;
        }

/* SECTION */

.loader-section {
            margin-bottom: 80px;
        }

.section-title {
            font-size: 30px;
            margin-bottom: 25px;
            color: #ffffff;
            border-left: 6px solid cyan;
            padding-left: 15px;
            letter-spacing: 1px;
        }

.section-box {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

/* CARD */

.card {
            background: #0f172a;
            border-radius: 22px;
            min-height: 280px;
            padding: 10px 30px;
            position: relative;
            overflow: hidden;
            border: 1px solid #483a3a;
            box-shadow: 0 0 20px rgba(30, 166, 166, 1);
        }

.card-label {
            position: absolute;
            top: 15px;
            left: 20px;
            font-size: 13px;
            letter-spacing: 2px;
            color: #00f7ff;
        }

.preview-area {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

pre {
            margin-top: 35px;
            color: #cbd5e1;
            font-size: 14px;
            line-height: 1.7;
            white-space: pre-wrap;
        }

/* ========================= */
        /* 1 NEON RING */
        /* ========================= */

.ring-loader {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            border: 8px solid transparent;
            border-top: 8px solid cyan;
            border-right: 8px solid magenta;
            animation: ringSpin 1s linear infinite;
            box-shadow:
                0 0 20px cyan,
                0 0 45px magenta;
        }

@keyframes ringSpin {
            100% {
                transform: rotate(360deg);
            }
        }

/* ========================= */
        /* 2 MORPH SHAPE */
        /* ========================= */

.morph-loader {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #00f7ff, #ff00ff);
            animation: morph 2s infinite ease-in-out;
            box-shadow: 0 0 30px cyan;
        }

@keyframes morph {

0% {
                border-radius: 0%;
                transform: rotate(0deg);
            }

25% {
                border-radius: 50%;
                transform: rotate(90deg);
            }

50% {
                border-radius: 20%;
                transform: rotate(180deg) scale(1.2);
            }

75% {
                border-radius: 50% 10%;
                transform: rotate(270deg);
            }

100% {
                border-radius: 0%;
                transform: rotate(360deg);
            }

}

/* ========================= */
        /* 3 LIQUID WAVE */
        /* ========================= */

.liquid-loader {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
            border: 4px solid cyan;
            position: relative;
        }

.wave {
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgba(0, 247, 255, .8);
            top: 70%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 40%;
            animation: waveRotate 4s linear infinite;
        }

.wave::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: magenta;
            opacity: .5;
            border-radius: 45%;
            animation: waveRotate 6s linear infinite reverse;
        }

@keyframes waveRotate {
            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

/* ========================= */
        /* 4 ORBIT DOT */
        /* ========================= */

.orbit-loader {
            position: relative;
            width: 180px;
            height: 180px;
        }

.dot {
            position: absolute;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            margin: 60px 0 0 0;
            transform-origin: 0 -70px;
            animation: orbit 2s linear infinite;
        }

.dot1 {
            background: cyan;
        }

.dot2 {
            background: magenta;
            animation-delay: .3s;
        }

.dot3 {
            background: #00ff95;
            animation-delay: .6s;
        }

.dot4 {
            background: white;
            animation-delay: .9s;
        }

@keyframes orbit {
            100% {
                transform: rotate(360deg);
            }
        }

/* ========================= */
        /* 5 FUTURISTIC BAR */
        /* ========================= */

.bar-loader {
            display: flex;
            gap: 12px;
        }

.bar {
            width: 18px;
            height: 120px;
            border-radius: 20px;
            background: linear-gradient(to top, #00f7ff, #ff00ff);
            animation: bars 1s infinite ease-in-out;
        }

.bar:nth-child(2) {
            animation-delay: .1s;
        }

.bar:nth-child(3) {
            animation-delay: .2s;
        }

.bar:nth-child(4) {
            animation-delay: .3s;
        }

.bar:nth-child(5) {
            animation-delay: .4s;
        }

@keyframes bars {

0%,
            100% {
                transform: scaleY(.3);
            }

50% {
                transform: scaleY(1);
            }

}

@media(max-width:900px) {

.section-box {
                grid-template-columns: 1fr;
            }

}

- Advanced Loader Animation

Live Preview