धुलाई और सफाई

450 kevekıbhack

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

17 July 2025

ग्लास प्रभाव और टेलविंड के साथ कॉफ़ीशॉप लॉगिन पृष्ठ

29 September 2025

TikTok Coins रिचार्ज: सिक्के खरीदें और उपहार में दें (FR)

22 June 2025

क्रिएटिव ब्लॉग: डिज़ाइन, पॉडकास्ट और पोर्टफोलियो HTML

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>

धुलाई और सफाई

अनुशंसित

ग्लास प्रभाव और टेलविंड के साथ कॉफ़ीशॉप लॉगिन पृष्ठ

TikTok Coins रिचार्ज: सिक्के खरीदें और उपहार में दें (FR)

क्रिएटिव ब्लॉग: डिज़ाइन, पॉडकास्ट और पोर्टफोलियो HTML

HTML

CSS

JS

अनुशंसित

ग्लास प्रभाव और टेलविंड के साथ कॉफ़ीशॉप लॉगिन पृष्ठ

TikTok Coins रिचार्ज: सिक्के खरीदें और उपहार में दें (FR)

क्रिएटिव ब्लॉग: डिज़ाइन, पॉडकास्ट और पोर्टफोलियो HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS