Estructura HTML de la animación de carga CSS

1,033 byby.createsite

Abrir en el editor Publica tu código

Estructura HTML de la animación de carga CSS

Recomendado

14 January 2026

Búsqueda en japonés de Scratch: Proyectos y estudios

5 May 2024

Plantilla HTML de menú de restaurante

6 December 2024

Aplicación del tiempo

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