Animazione di caricamento CSS Spinner

840 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

13 January 2026

Modello HTML per sito web di film

18 April 2025

Un codice di Metehan

31 July 2025

Modello HTML della pagina di accesso Liquid Drop

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);          
            }
        }

Consigliato

Modello HTML per sito web di film

Un codice di Metehan

Modello HTML della pagina di accesso Liquid Drop

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS