Animazione di caricamento CSS: caricatore circolare

69 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Animazione di caricamento CSS: caricatore circolare

Consigliato

20 May 2025

HTML, Accedi Registrati animato

HTML

CSS

/* foundation css */
    * {
      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-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;
    }

@keyframes loading-animation {
      0% {
        transform: translateY(0);
        opacity: 0;
      }
      10% {
        transform: translateY(-10px);
        opacity: 0.5;
      }
      50% {
        transform: translateY(20px);
        opacity: 1;
      }
      90% {
        transform: translateY(-10px);
        opacity: 0.5;
      }
      100% {
        transform: translateY(0);
        opacity: 0;
      }
    }

.loading-element {
        border-radius: 50%;
        width: 30px;
        height: 30px;
        animation: loading-animation 1s linear infinite;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #666;
        box-shadow: 0 0 10px #666;
    }

.circle1 {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #666;
      animation: loading-animation 2s linear infinite;
      position: absolute;
      top: 70%;
      left: 30%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 20px #666;
    }

@keyframes ripple-animation {
      0% {
        width: 0;
        height: 0;
        opacity: 0;
      }
      50% {
        width: 100px;
        height: 100px;
        opacity: 0.2;
      }
      100% {
        width: 0;
        height: 0;
        opacity: 0;
      }
    }

.circle2 {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #666;
      animation: ripple-animation 1.5s ease-out;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 10px #666;
    }

.circle3 {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #333;
      animation: pulse-animation 1.5s ease-out;
      position: absolute;
      top: 75%;
      left: 70%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 5px #333;
    }

@keyframes pulse-animation {
      0% {
        width: 0;
        height: 0;
        opacity: 0;
      }
      50% {
        width: 80px;
        height: 80px;
        opacity: 0.5;
      }
      100% {
        width: 0;
        height: 0;
        opacity: 0;
      }
    }

.circle4 {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #666;
      animation: loading-animation 2.5s linear infinite;
      position: absolute;
      top: 80%;
      left: 40%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 20px #666;
    }

.circle5 {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #666;
      animation: loading-animation 2.5s linear infinite;
      position: absolute;
      top: 60%;
      left: 80%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 5px #666;
    }

.circle6 {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #666;
      animation: ripple-animation 2.5s ease-out;
      position: absolute;
      top: 40%;
      left: 60%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 5px #666;
    }

Animazione di caricamento CSS: caricatore circolare

Consigliato

Un codice di Skyrreum

Un codice di Mete

HTML, Accedi Registrati animato

HTML

CSS

JS

Consigliato

Un codice di Skyrreum

Un codice di Mete

HTML, Accedi Registrati animato

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS