Exemplos de animação CSS: carregamento, cubos, esferas

Abrir no Editor Publique Seu Código

Recomendado

30 November 2024

Código HTML da animação CSS Eye Loader

HTML

```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <style>
    /* Fundamentos CSS */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background:url("https://vinixodin.com/thumb.jpg") no-repeat center center;
      background-color: #2C2F33;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

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

.loading-element {
      position: relative;
      display: block;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      margin: 0 auto;
      background: linear-gradient(to right, #2ECC40, #8B9467);
      animation: loading-animation 1s linear infinite;
    }

@@keyframes loading-animation {
      from {
        transform: scale(0);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }

.pilha {
      position: absolute;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 200px;
    }

.cubo {
      position: relative;
      display: block;
      width: 50px;
      height: 50px;
      background: #66D9EF;
      border-radius: 50%;
      animation: cubo-animation 2s linear infinite;
    }

@@keyframes cubo-animation {
      from {
        left: 0;
        top: 0;
      }
      to {
        left: 50px;
        top: 50px;
      }
    }

.esfera {
      position: relative;
      display: block;
      width: 50px;
      height: 50px;
      background: #E6DB74;
      border-radius: 50%;
      animation: esfera-animation 2s linear infinite;
    }

@@keyframes esfera-animation {
      from {
        left: 100px;
        top: 100px;
      }
      to {
        left: 150px;
        top: 50px;
      }
    }

.linha {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: #A6E22E;
      animation: linha-animation 1s linear infinite;
    }

@@keyframes linha-animation {
      from {
        top: 0;
        left: 0;
      }
      to {
        top: 50px;
        left: 100px;
      }
    }
  </style>
</head>
<body>

<div class="animation-container">
    <div class="pilha">
      <div class="cubo"></div>
      <div class="esfera"></div>
      <div class="linha"></div>
    </div>
    <div class="loading-element"></div>
  </div>
</body>
</html>
```

CSS

/* 
  Base foundation
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background:url("./thumb.jpg") no-repeat center center;
  background-color: black;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  aspect-ratio: 9/16;
}

.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;
  aspect-ratio: 9/16;
}

/* 
  Layers e motivação emocional
*/
.loading-element {
  background-color: #333333;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  animation: loading-animation 1s linear infinite;
  position: relative;
}

@keyframes loading-animation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.layer1 {
  width: 100%;
  height: 100%;
  background-color: #4D4D4D;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}

.layer1::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #3F3F3F;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* 
  Micro-detalhes para o replay value
*/
.layer2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #3F3F3F;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: detalhe 2s linear infinite;
}

@keyframes detalhe {
  50% {
    transform: scale(1);
    background-color: #666666;
  }
  100% {
    transform: scale(0);
    background-color: #3F3F3F;
  }
}

/* 
  Interações entre camadas e elementos
*/
.layer3 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #2F2F2F;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: interacao 2s linear infinite;
}

@keyframes interacao {
  50% {
    transform: scale(1);
    background-color: #777777;
  }
  100% {
    transform: scale(0);
    background-color: #2F2F2F;
  }
}

Exemplos de animação CSS: carregamento, cubos, esferas

Recomendado

Menu de navegação do Coreboot

Um Código de Metehan

Código HTML da animação CSS Eye Loader

HTML

CSS

JS

Recomendado

Menu de navegação do Coreboot

Um Código de Metehan

Código HTML da animação CSS Eye Loader

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS