Animation de chargement CSS : chargeur circulaire

502 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Animation de chargement CSS : chargeur circulaire

Recommandé

9 September 2024

ville de pépins

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

Animation de chargement CSS : chargeur circulaire

Recommandé

Générateur de mot de passe

Un code par securearray494

ville de pépins

HTML

CSS

JS

Recommandé

Générateur de mot de passe

Un code par securearray494

ville de pépins

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS