Animazione di caricamento CSS Struttura HTML

84 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Animazione di caricamento CSS Struttura HTML

Consigliato

5 June 2025

Un codice di alejandrokundrah

HTML

CSS

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

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

.loading-element {
      width: 20%;
      height: 80%;
      background-color: #333;
      border-radius: 50%;
      animation: loading-animation 1s linear infinite;
      position: relative;
    }

.layer-1 {
      width: 100%;
      height: 0;
      background-color: #555;
      position: absolute;
      bottom: 0;
      animation: pulse 2s ease-out;
      transform-origin: center bottom;
    }

.layer-2 {
      width: 90%;
      height: 70%;
      background-color: #777;
      position: absolute;
      bottom: 20%;
      left: 5%;
      animation: wave 4s ease-in-out;
      transform-origin: center bottom;
    }

.layer-3 {
      width: 80%;
      height: 60%;
      background-color: #999;
      position: absolute;
      bottom: 40%;
      left: 10%;
      animation: ripple 3s ease-out;
      transform-origin: center bottom;
    }

.loading-element::before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10%;
      height: 20%;
      background-color: #000;
      border-radius: 50%;
      box-shadow: 0 0 10px #000;
      animation: zoom 2s ease-out;
    }

.loading-element::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 5%;
      height: 10%;
      background-color: #000;
      border-radius: 50%;
      box-shadow: 0 0 5px #000;
      animation: pulse-out 2s ease-out;
      animation-delay: 1s;
    }

@keyframes loading-animation {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(2);
      }
    }

@keyframes pulse {
      0% {
        height: 0;
      }
      20% {
        height: 10%;
      }
      40% {
        height: 20%;
      }
      60% {
        height: 15%;
      }
      80% {
        height: 10%;
      }
      100% {
        height: 0;
      }
    }

@keyframes wave {
      0% {
        transform: scaleY(0);
      }
      20% {
        transform: scaleY(1.2);
      }
      40% {
        transform: scaleY(0.9);
      }
      60% {
        transform: scaleY(1.1);
      }
      80% {
        transform: scaleY(0.8);
      }
      100% {
        transform: scaleY(0);
      }
    }

@keyframes ripple {
      0% {
        transform: scale(0);
      }
      20% {
        transform: scale(1.2);
      }
      40% {
        transform: scale(0.9);
      }
      60% {
        transform: scale(1.1);
      }
      80% {
        transform: scale(0.8);
      }
      100% {
        transform: scale(0);
      }
    }

@keyframes zoom {
      0% {
        width: 5%;
        height: 10%;
        box-shadow: 0 0 5px #000;
      }
      100% {
        width: 10%;
        height: 20%;
        box-shadow: 0 0 10px #000;
      }
    }

@keyframes pulse-out {
      0% {
        height: 5%;
        width: 5%;
      }
      100% {
        height: 0%;
        width: 0%;
      }
    }

Animazione di caricamento CSS Struttura HTML

Consigliato

Un codice di alejandrokundrah

Un codice di cleancloud199

Un codice di alejandrokundrah

HTML

CSS

JS

Consigliato

Un codice di alejandrokundrah

Un codice di cleancloud199

Un codice di alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS