Fragmento de animación de carga de CSS

1,266 byby.createsite

Remix Abrir en el editor Publica tu código

Recomendado

11 September 2026

Surfistas del metro

11 August 2025

Colección de animaciones circulares CSS

21 July 2025

Pantalla de TV HTML con incrustación de YouTube y efectos

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