Animation du spinner de chargement CSS

842 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

6 March 2025

Modèle de boîte de discussion HTML

HTML

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background-color: #282A34;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }

.codigo {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #272822;
            color: #F8F8F2;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 18px;
            padding: 20px;
            border-radius: 8px;
            white-space: pre-line;
            text-align: left;
            line-height: 1.6;
            max-height: 25%;
            min-width: 100%;
            width: 100%;
            overflow-y: auto;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

.selector       { color: #F92672; }
        .property       { color: #66D9EF; }
        .value-number   { color: #AE81FF; }
        .value-string   { color: #E6DB74; }
        .value-color    { color: #A6E22E; }
        .brace          { color: #F8F8F2; }
        .comment        { color: #75715E; }
        .function       { color: #A6E22E; }

.animation-container {
            position: absolute;
            top: 75%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 50%;
            overflow: hidden;
            background: transparent;
        }

.spinner {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: radial-gradient(circle at center, #F2932D, #DA2E29);
            animation: burnout 10s linear infinite;
        }

@keyframes burnout {
            0% {
                transform: scale(1);         /* Initial State */
            }

50% {        
                transform: scale(1.1);        
            }

100% {
                opacity: 0;                 /* Fade out completely */
                transform: scale(0.4);          
            }
        }

Animation du spinner de chargement CSS

Recommandé

Un code par omer

Page de connexion 3D

Modèle de boîte de discussion HTML

HTML

CSS

JS

Recommandé

Un code par omer

Page de connexion 3D

Modèle de boîte de discussion HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS