Fragmento de animación de carga de CSS

1,366 byby.createsite

Abrir en el editor Publica tu código

Recomendado

13 September 2025

Animación de barra de carga CSS HTML

22 November 2024

Página de inicio - God of War

2 March 2025

Sistema de inicio de sesión HTML y CSS

HTML

CSS

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

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

/* layers */
    .loading-element {
      /* cor principal do fundo */
      background: #f0f0f0;
      /* tamanhos base */
      width: 5vw;
      height: 5vh;
      /* efeitos */
      aspect-ratio: 9/16;
      border-radius: 50%;
      animation: loading-animation 1s linear infinite;
    }

@keyframes loading-animation {
      to {
        transform: rotateZ(360deg);
        box-shadow: -5vw 5vh 10vw rgba(0, 0, 0, 0.5);
      }
    }

/* micro detalhes */
    @keyframes loading-animation-infinite {
      from {
        box-shadow: -5vw 5vh 10vw rgba(0, 0, 0, 0.5);
      }
      to {
        box-shadow: -5vw 5vh 20vw rgba(0, 0, 0, 0.5);
      }
    }

.loading-element::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent transparent transparent rgba(0, 0, 0, 0.5);
      border-width: 2vh 2vh 2vh 0;
      animation: loading-animation-infinite 1s linear infinite;
    }

/* interdependente */
    @keyframes moving-ripple {
      from {
        transform: translateX(-5vw);
      }
      to {
        transform: translateX(5vw);
      }
    }

.moving-ripple {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 5vw;
      height: 5vh;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      animation: moving-ripple 2s linear infinite;
    }

.moving-ripple::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 5vw;
      height: 5vh;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      animation: moving-ripple 2s linear infinite;
    }

/* cores e efeitos */
    .loading-element:hover {
      background: rgba(255, 255, 255, 0.5);
      box-shadow: 0 0 5vw rgba(0, 0, 0, 0.5);
    }

.loading-element:hover::after {
      border-width: 2vh 6vh 2vh 0;
    }