Unique Loader UI (HTML + CSS Only) by Indoram24

HTML Code
CSS Code

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

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

.loader-wrapper{
    position:relative;
    width:120px;
    height:120px;
}

/* outer pulse ring */
.pulse-ring{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:3px solid transparent;
    border-top:3px solid #22d3ee;
    animation: spin 1.5s linear infinite;
}

/* inner glowing core */
.core{
    position:absolute;
    top:50%;
    left:50%;
    width:30px;
    height:30px;
    transform:translate(-50%,-50%);
    background:#22d3ee;
    border-radius:50%;
    box-shadow:0 0 20px #22d3ee, 0 0 40px #22d3ee;
    animation: pulse 1.2s ease-in-out infinite;
}

/* floating dots */
.dot{
    position:absolute;
    width:10px;
    height:10px;
    background:#38bdf8;
    border-radius:50%;
    animation: orbit 2s linear infinite;
}

.dot:nth-child(3){ animation-delay:0s }
.dot:nth-child(4){ animation-delay:0.6s }
.dot:nth-child(5){ animation-delay:1.2s }

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

@keyframes pulse{
    0%,100%{ transform:translate(-50%,-50%) scale(1); }
    50%{ transform:translate(-50%,-50%) scale(1.5); }
}

@keyframes orbit{
    0%{
        transform:rotate(0deg) translateX(50px) rotate(0deg);
        opacity:1;
    }
    100%{
        transform:rotate(360deg) translateX(50px) rotate(-360deg);
        opacity:0.3;
    }
}

Uploaded: 3rd January 2026

Tags: #loader, #dark

Indoram24

•Member since: 3rd January 2026

CSS Properties Used

There are 22 CSS properties used in the above example. Click to view and learn about each property.

margin padding box-sizing font-family height display align-items justify-content background position width inset border-radius border border-top animation top left transform box-shadow animation-delay opacity

HTML Tags Used

There are 6 HTML Tags used in the above example. Click to view and learn about each tag.

html head meta title body div