Animazione CSS: effetto cerchio di caricamento

693 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Animazione CSS: effetto cerchio di caricamento

Consigliato

18 October 2025

Esempio di pulsante HTML di base

18 June 2025

Un codice di alejandrob.f2012

HTML

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

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

@keyframes loading-animation {
      0% { 
        transform: scale(0.2);
        opacity: 0;
        background-color: #8f9f2f;
        border-radius: 20px;
        width: 80%;
        height: 20%;
      }
      20% { 
        transform: scale(0.5);
        opacity: 0.5;
        background-color: #3f9d4b;
        border-radius: 40px;
        width: 50%;
        height: 30%;
      }
      40% { 
        transform: scale(1);
        opacity: 1;
        background-color: #7f6e8f;
        border-radius: 20px;
        width: 80%;
        height: 20%;
      }
      60% { 
        transform: scale(1.5);
        opacity: 0.5;
        background-color: #9f0d5f;
        border-radius: 20px;
        width: 80%;
        height: 20%;
      }
      80% { 
        transform: scale(2);
        opacity: 0;
        background-color: #1b0f7d;
        border-radius: 50%;
        width: 10%;
        height: 30%;
      }
      100% { 
        transform: scale(0.2);
        opacity: 0;
        background-color: #8f9f2f;
        border-radius: 20px;
        width: 80%;
        height: 20%;
      }
    }

/* A animação é criada com a sensação de desorientação e confusão,
       refletindo a sensação de frustração quando estamos com dificuldade para resolver um problema */
    .circle1 {
      position: absolute;
      top: 55%;
      left: 0%;
      transform: translate(-50%, -50%);
      background: #4f5b64;
      width: 80%;
      height: 20%;
      border-radius: 20px;
      animation: circle-animation 1s linear infinite;
    }

@keyframes circle-animation {
      0% {
        transform: scale(0.5);
        opacity: 0;
        background-color: #8f9f2f;
        border-radius: 40px;
      }
      20% {
        transform: scale(1);
        opacity: 0.5;
        background-color: #3f9d4b;
        border-radius: 20px;
      }
      40% {
        transform: scale(1.2);
        opacity: 0;
        background-color: #7f6e8f;
        border-radius: 40px;
      }
      60% {
        transform: scale(0.8);
        opacity: 0.5;
        background-color: #9f0d5f;
        border-radius: 20px;
      }
      80% {
        transform: scale(0.5);
        opacity: 0;
        background-color: #1b0f7d;
        border-radius: 50%;
      }
      100% {
        transform: scale(0.2);
        opacity: 0;
        background-color: #8f9f2f;
        border-radius: 20px;
      }
    }

/* A animação é criada com a sensação de confusão e desorientação,
       refletindo a sensação de confusão quando estamos com dificuldade para resolver um problema */
    .circle2 {
      position: absolute;
      top: 70%;
      left: 20%;
      transform: translate(-50%, -50%);
      background: #4f5b64;
      width: 60%;
      height: 30%;
      border-radius: 50%;
      animation: circle2-animation 1s linear infinite;
    }

@keyframes circle2-animation {
      0% {
        transform: scale(0.2);
        opacity: 0;
        background-color: #8f9f2f;
        border-radius: 20px;
      }
      20% {
        transform: scale(0.5);
        opacity: 0.5;
        background-color: #3f9d4b;
        border-radius: 40px;
      }
      40% {
        transform: scale(1);
        opacity: 0;
        background-color: #7f6e8f;
        border-radius: 20px;
      }
      60% {
        transform: scale(1.2);
        opacity: 0.5;
        background-color: #9f0d5f;
        border-radius: 40px;
      }
      80% {
        transform: scale(0.8);
        opacity: 0;
        background-color: #1b0f7d;
        border-radius: 50%;
      }
      100% {
        transform: scale(0.2);
        opacity: 0;
        background-color: #8f9f2f;
        border-radius: 20px;
      }
    }

.codigo::before::after {
      content: '';
      position: absolute;
      top: 70%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: linear-gradient(#7f6e8f, #9f0d5f);
      border-radius: 40px;
      width: 80%;
      height: 20%;
    }

/* A animação é criada com a sensação de libertação e liberdade,
       refletindo a sensação de liberdade quando finalmente resolvido um problema */
    .final-element {
      position: absolute;
      top: 90%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #4f5b64;
      width: 100%;
      height: 10%;
      border-radius: 50%;
      animation: final-animation 1s linear infinite;
    }

@keyframes final-animation {
      0% {
        transform: scale(1);
        opacity: 0;
        background-color: #8f9f2f;
        border-radius: 20px;
      }
      20% {
        transform: scale(1.5);
        opacity: 0.5;
        background-color: #3f9d4b;
        border-radius: 40px;
      }
      40% {
        transform: scale(2);
        opacity: 0;
        background-color: #7f6e8f;
        border-radius: 20px;
      }
      60% {
        transform: scale(1.5);
        opacity: 0.5;
        background-color: #9f0d5f;
        border-radius: 40px;
      }
      80% {
        transform: scale(1);
        opacity: 0;
        background-color: #1b0f7d;
        border-radius: 50%;
      }
      100% {
        transform: scale(1);
        opacity: 0;
        background-color: #8f9f2f;
        border-radius: 20px;
      }
    }

Animazione CSS: effetto cerchio di caricamento

Consigliato

Esempio di pulsante HTML di base

Un codice di ByBy.inc

Un codice di alejandrob.f2012

HTML

CSS

JS

Consigliato

Esempio di pulsante HTML di base

Un codice di ByBy.inc

Un codice di alejandrob.f2012

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS