Frammento di animazione di caricamento CSS

566 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Frammento di animazione di caricamento CSS

Consigliato

16 September 2025

Carosello di carte 3D HTML CSS JavaScript

18 June 2025

Interfaccia utente di DarkSpace

28 October 2025

Pulsante di attivazione/disattivazione della modalità chiara HTML/CSS/JS

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

Consigliato

Carosello di carte 3D HTML CSS JavaScript

Interfaccia utente di DarkSpace

Pulsante di attivazione/disattivazione della modalità chiara HTML/CSS/JS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS