Animation CSS : effet de cercle de chargement

837 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Animation CSS : effet de cercle de chargement

Recommandé

9 July 2025

Carte de prix avec effet d'inclinaison 3D et d'anneau énergétique

22 May 2025

Un code de Metehan

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

Animation CSS : effet de cercle de chargement

Recommandé

Carte de prix avec effet d'inclinaison 3D et d'anneau énergétique

Animation de morphing SVG

Un code de Metehan

HTML

CSS

JS

Recommandé

Carte de prix avec effet d'inclinaison 3D et d'anneau énergétique

Animation de morphing SVG

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS