CSS Loading Animation Snippet

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

/* Core da Animação */
    .loading-element {
      /* Propriedades básicas */
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #FFFFFF;
      animation: loading-animation 1s linear infinite;
    }

/* Animação principais */
    .sobe {
      position: relative;
      top: 0;
      animation: sobe 5s ease-in-out infinite;
    }

@keyframes loading-animation {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
        background-color: #E6DB74;
      }
      100% {
        transform: scale(1);
      }
    }

@keyframes sobe {
      0% {
        transform: translateY(0%);
      }
      50% {
        transform: translateY(-20%);
      }
      100% {
        transform: translateY(0%);
      }
    }

CSS Loading Animation Snippet

Recommended

CSS Dark Mode Toggle

CSS Filter cards

Rotating Circle Loading Page

HTML

CSS

JS

Recommended

CSS Dark Mode Toggle

CSS Filter cards

Rotating Circle Loading Page

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS