CSS Loading Animation: Circle, Line, Dot

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

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

CSS Loading Animation: Circle, Line, Dot

Recommended

CSS ile bir karesel döngü

3D Card Carousel HTML CSS JavaScript

CSS Floating Interface Animation

HTML

CSS

JS

Recommended

CSS ile bir karesel döngü

3D Card Carousel HTML CSS JavaScript

CSS Floating Interface Animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS