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

CSS only infinate marquee

CSS Brain Animation HTML Snippet

CSS Dopamine Drip Animation Code Snippet

HTML

CSS

JS

Recommended

CSS only infinate marquee

CSS Brain Animation HTML Snippet

CSS Dopamine Drip Animation Code Snippet

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS