Animation du spinner de chargement CSS

1,142 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

27 October 2023

Jeu de Tetris simple

15 May 2025

DJ d'introduction

29 June 2025

Modèle HTML pour blog et podcast turc

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