Animazione di caricamento CSS Struttura HTML

651 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Animazione di caricamento CSS Struttura HTML

Consigliato

13 June 2025

Un codice di Metehan

12 October 2025

Esempio HTML di mockup dell'interfaccia utente di Facebook

23 August 2025

Modulo di accesso e registrazione HTML (turco)

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

Consigliato

Un codice di Metehan

Esempio HTML di mockup dell'interfaccia utente di Facebook

Modulo di accesso e registrazione HTML (turco)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS