lavar e limpar

917 kevekıbhack

Abrir no Editor Video Publique Seu Código

Recomendado

28 August 2025

Exemplo de contêiner de animação CSS

24 June 2025

Um código de Mete

29 December 2025

Ideal para praticar HTML/CSS/JS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Stylish Loader</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      height: 100vh;
      background: linear-gradient(135deg, #e0f7fa, #e1f5fe);
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Arial, sans-serif;
    }

.loader {
      width: 120px;
      height: 150px;
      background-color: #fff;
      background-repeat: no-repeat;
      background-image: 
        linear-gradient(#ddd 50%, #bbb 51%),
        linear-gradient(#ddd, #ddd),
        linear-gradient(#ddd, #ddd),
        radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, transparent 55%),
        radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, transparent 55%),
        radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, transparent 55%);
      background-position: 
        0 20px, 
        45px 0, 
        8px 6px, 
        55px 3px, 
        75px 3px, 
        95px 3px;
      background-size: 
        100% 4px, 
        1px 23px, 
        30px 8px, 
        15px 15px, 
        15px 15px, 
        15px 15px;
      position: relative;
      border-radius: 6%;
      animation: shake 3s ease-in-out infinite;
      transform-origin: 60px 180px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }

.loader:before {
      content: "";
      position: absolute;
      left: 5px;
      top: 100%;
      width: 7px;
      height: 5px;
      background: #aaa;
      border-radius: 0 0 4px 4px;
      box-shadow: 102px 0 #aaa;
    }

.loader:after {
      content: "";
      position: absolute;
      width: 95px;
      height: 95px;
      left: 0;
      right: 0;
      margin: auto;
      bottom: 20px;
      background-color: #bbdefb;
      background-image: 
        linear-gradient(to right, #0004 0%, #0004 49%, transparent 50%, transparent 100%),
        linear-gradient(135deg, #64b5f6 50%, #607d8b 51%);
      background-size: 30px 100%, 90px 80px;
      border-radius: 50%;
      background-repeat: repeat, no-repeat;
      background-position: 0 0;
      border: 10px solid #DDD;
      box-shadow: 0 0 0 4px #999 inset, 0 0 6px 6px #0004 inset;
      animation: spin 3s ease-in-out infinite;
    }

@keyframes spin {
      0% { transform: rotate(0deg); }
      50% { transform: rotate(360deg); }
      75% { transform: rotate(750deg); }
      100% { transform: rotate(1800deg); }
    }

@keyframes shake {
      65%, 80%, 88%, 96% {
        transform: rotate(0.5deg);
      }
      50%, 75%, 84%, 92% {
        transform: rotate(-0.5deg);
      }
      0%, 50%, 100% {
        transform: rotate(0);
      }
    }
  </style>
</head>
<body>
  <div class="loader"><p class="loader-text"</p></div>
    </p></div>
</body>
</html>

Recomendado

Exemplo de contêiner de animação CSS

Um código de Mete

Ideal para praticar HTML/CSS/JS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS