CSS Loading Animation: Circle Loader

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

CSS Loading Animation: Circle Loader

Recommended

Virtual Keyboard HTML CSS JavaScript

CSS Memory Animation Snippet

Geometry Dash Game Clone HTML CSS JavaScript

HTML

CSS

JS

Recommended

Virtual Keyboard HTML CSS JavaScript

CSS Memory Animation Snippet

Geometry Dash Game Clone HTML CSS JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS