Extrait d'animation de chargement CSS

1,265 byby.createsite

Remixer Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 August 2025

Marché informatique : achetez des ordinateurs portables, des ordinateurs de bureau et plus encore

16 January 2026

Modèle HTML de joueur de jeu Ruffle Flash

19 March 2025

Conception de sites Web utilisant HTML et CSS

HTML

CSS

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

body {
      background:url("./thumb.jpg") no-repeat center center;
      background-color: black;
      background-size: cover;
      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%;
      max-width: 75%;
      width: 75%;
      height: 25%;
      top:15%;
      overflow-y: hidden;
      box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
    }

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

/* animation rules */
    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

.loading-element {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      animation: loading 2s linear infinite;
    }

.loading-element::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #f92672;
      animation: loading 1s linear infinite;
    }

.loading-element:nth-child(3) {
      animation-delay: 2s;
    }

.loading-element:nth-child(3)::before {
      animation-delay: 1s;
    }

/* animated layers */
    .layer-1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 50%;
      background-color: #66d9ef;
      z-index: 1;
    }

.layer-1::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 0%;
      height: 100%;
      background-color: #66d9ef;
      z-index: -1;
      animation: animate-layer 2s linear infinite;
    }

.layer-2 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 50%;
      background-color: #a6e22e;
      z-index: 2;
    }

.layer-2::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 0%;
      height: 100%;
      background-color: #a6e22e;
      z-index: -2;
      animation: animate-layer 2s linear infinite;
      animation-delay: 1s;
    }

/* additional elements */
    .dot-1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #f8f8f2;
    }

.dot-1::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 2px;
      background-color: #f8f8f2;
      animation: animate-dot 2s linear infinite;
    }

.dot-2 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #f8f8f2;
    }

.dot-2::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 2px;
      background-color: #f8f8f2;
      animation: animate-dot 2s linear infinite;
      animation-delay: 1s;
    }

/* animation functions */
    @keyframes animate-layer {
      0% {
        width: 0%;
      }
      100% {
        width: 100%;
      }
    }

@keyframes animate-dot {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      25% {
        transform: translate(-50%, -50%) rotate(45deg);
      }
      50% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
    }