CSS Animation: Loading Circle Effect

Open In Editor Video Publish Your Code

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

CSS Animation: Loading Circle Effect

Recommended

HTML CSS Login Form

CSS Alien Spaceship Animation with Stars

CSS Loading Animation Snippet

HTML

CSS

JS

Recommended

HTML CSS Login Form

CSS Alien Spaceship Animation with Stars

CSS Loading Animation Snippet

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS