Estructura HTML de la animación de carga CSS

58 ByBy.inc

Abrir en el editor Publica tu código

Estructura HTML de la animación de carga CSS

Recomendado

17 July 2025

Página de inicio de sesión de CoffeeShop con efecto cristal y viento de cola

18 August 2024

Barra de navegación

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

Estructura HTML de la animación de carga CSS

Recomendado

Página de inicio de sesión de CoffeeShop con efecto cristal y viento de cola

Lazo de neón

Barra de navegación

HTML

CSS

JS

Recomendado

Página de inicio de sesión de CoffeeShop con efecto cristal y viento de cola

Lazo de neón

Barra de navegación

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS