Estructura HTML de la animación de carga CSS

1,199 byby.createsite

Abrir en el editor Publica tu código

Estructura HTML de la animación de carga CSS

Recomendado

26 January 2026

Código HTML5 para insertar en el juego Escape Road

20 October 2023

Truco de Captura de Ratón en JS

28 September 2025

Animación de carga CSS con imagen de fondo

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