Animation de chargement CSS : cercle, ligne, point

968 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Animation de chargement CSS : cercle, ligne, point

Recommandé

25 November 2025

menu de la barre de navigation

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

@keyframes loading-animation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

.loading-element {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
      animation: loading-animation 1s linear infinite;
    }

.loading-element::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5));
      transform: scale(0);
      animation: loading-animation 1s linear infinite;
    }

.loading-element::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5));
      transform: scale(0);
      animation: loading-animation 1s linear infinite;
    }

.circle1 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%) translateY(-50%) rotate(45deg);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      animation: circle1-animation 2s ease-in-out infinite;
    }

.circle1::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5));
      transform: scale(0);
      animation: circle1-animation 2s ease-in-out infinite;
    }

@keyframes circle1-animation {
      0% {
        transform: scale(0);
        opacity: 0;
      }
      50% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(0);
        opacity: 0;
      }
    }

.circle2 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 50%) rotate(135deg);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      animation: circle2-animation 2s ease-in-out infinite;
    }

.circle2::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5));
      transform: scale(0);
      animation: circle2-animation 2s ease-in-out infinite;
    }

@keyframes circle2-animation {
      0% {
        transform: scale(0);
        opacity: 0;
      }
      50% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(0);
        opacity: 0;
      }
    }

.line {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
      width: 100%;
      height: 10px;
      background: rgba(255, 255, 255, 0.5);
      animation: line-animation 2s ease-in-out infinite;
    }

@keyframes line-animation {
      0% {
        transform: scaleX(0);
      }
      50% {
        transform: scaleX(1);
      }
      100% {
        transform: scaleX(0);
      }
    }

.dot {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      animation: dot-animation 2s ease-in-out infinite;
    }

@keyframes dot-animation {
      0% {
        transform: translateY(-50%);
        opacity: 0;
      }
      50% {
        transform: translateY(50%);
        opacity: 1;
      }
      100% {
        transform: translateY(-50%);
        opacity: 0;
      }
    }

.text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
      font-size: 24px;
      color: rgba(255, 255, 255, 0.5);
      animation: text-animation 2s ease-in-out infinite;
    }

@keyframes text-animation {
      0% {
        transform: translateY(-50%);
        opacity: 0;
      }
      50% {
        transform: translateY(50%);
        opacity: 1;
      }
      100% {
        transform: translateY(-50%);
        opacity: 0;
      }
    }

Animation de chargement CSS : cercle, ligne, point

Recommandé

Route de l'évasion

Un code par smartfunction186

menu de la barre de navigation

HTML

CSS

JS

Recommandé

Route de l'évasion

Un code par smartfunction186

menu de la barre de navigation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS