Estructura HTML de la animación de carga CSS

1,382 byby.createsite

Remix Abrir en el editor Publica tu código

Estructura HTML de la animación de carga CSS

Recomendado

18 May 2025

escribiendo en la pantalla

10 October 2026

Cargador de juegos WebGL para Gorilla Tag en HTML y JavaScript

18 December 2025

Cargador WebGL de Unity desde Zip con CrazyGames SDK Shim

HTML

CSS

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

body {
      background:url("./thumb.jpg") no-repeat center center;
      background-color: #1f1f1f;
      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-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;
    }

/* Sunday Blues */

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

@keyframes loading-animation {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
    }

.error-1 {
      position: absolute;
      top: 60%;
      left: 45%;
      transform: translate(-20%, 0);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #ff7f7f;
      animation: error-1-animation 3s backwards;
    }

@keyframes error-1-animation {
      0% {
        transform: translate(-20%, 0) scale(1);
      }
      100% {
        transform: translate(-20%, 0) scale(0);
      }
    }

.error-2 {
      position: absolute;
      top: 50%;
      left: 40%;
      transform: translate(-20%, 0);
      width: 100px;
      height: 20px;
      background-color: #ff7f7f;
      animation: error-2-animation 3s backwards;
    }

@keyframes error-2-animation {
      0% {
        transform: translate(-20%, 0) scale(1);
      }
      100% {
        transform: translate(-20%, 0) scale(0);
      }
    }

/* Micro-detail that only appears on the 2nd playthrough */
    .detail {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      background-color: #fff;
      animation: detail-animation 3s backwards;
    }

@keyframes detail-animation {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      100% {
        transform: translate(-50%, -50%) scale(0);
      }
    }