Extrait de code CSS pour chargeur animé

19 codex

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

13 December 2025

Code Canvas HTML WebGL de Super Mario 64

23 April 2025

Générateur de mots de passe par SENAPI

28 August 2024

Formulaire d'idée

HTML

<!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>

Recommandé

Code Canvas HTML WebGL de Super Mario 64

Générateur de mots de passe par SENAPI

Formulaire d'idée

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS