lavare e pulire

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

11 June 2025

<!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>

lavare e pulire

Consigliato

Un codice di Mete

Un codice del testo

Un codice per codice

HTML

CSS

JS

Consigliato

Un codice di Mete

Un codice del testo

Un codice per codice

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS