CSS Animated Loader Snippet

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Animated Loader</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background-color: #0a0a0a;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            font-family: 'Segoe UI', sans-serif;
        }

.loader-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
        }

/* The Spinner */
        .spinner {
            position: relative;
            width: 120px;
            height: 120px;
        }

.spinner span {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 4px solid transparent;
            border-radius: 50%;
        }

.spinner span:nth-child(1) {
            border-top-color: #00d2ff;
            animation: rotate 2s linear infinite;
        }

.spinner span:nth-child(2) {
            width: 80%;
            height: 80%;
            top: 10%;
            left: 10%;
            border-bottom-color: #3a7bd5;
            animation: rotate-reverse 1.5s linear infinite;
        }

.spinner span:nth-child(3) {
            width: 60%;
            height: 60%;
            top: 20%;
            left: 20%;
            border-right-color: #00d2ff;
            animation: rotate 1s linear infinite;
        }

/* Loading Text */
        .text {
            color: #ffffff;
            font-size: 14px;
            font-weight: 300;
            letter-spacing: 5px;
            text-transform: uppercase;
            animation: fade 2s ease-in-out infinite;
        }

/* Glow Effect */
        .glow {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(0, 210, 255, 0.2);
        }

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

@keyframes rotate-reverse {
            0% { transform: rotate(360deg); }
            100% { transform: rotate(0deg); }
        }

@keyframes fade {
            0%, 100% { opacity: 0.3; transform: scale(0.95); }
            50% { opacity: 1; transform: scale(1); }
        }
    </style>
</head>
<body>

<div class="loader-wrapper">
        <div class="spinner">
            <div class="glow"></div>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="text">Loading</div>
    </div>

</body>
</html>

CSS Animated Loader Snippet

Recommended

Animated Stars Rating Template

Formulaire de connexion HTML avec style CSS néon

3D Login Signup Box HTML CSS

HTML

CSS

JS

Recommended

Animated Stars Rating Template

Formulaire de connexion HTML avec style CSS néon

3D Login Signup Box HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS