CSS Loading Animation: Circle, Line, Dot

Open In Editor 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

Simple CSS Card Template

HTML CSS Event Registration System Website

CSS Animated Button Hover Effect

HTML

CSS

JS

Recommended

Simple CSS Card Template

HTML CSS Event Registration System Website

CSS Animated Button Hover Effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS