CSS लोडर स्पिनर: सरल HTML

357 alejandrokundrah

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

अनुशंसित

22 August 2025

HTML कोड प्लेसहोल्डर टिप्पणी

16 September 2025

HTML हार्ट एनिमेशन डेटा स्ट्रीम

13 November 2024

शुद्ध CSS का उपयोग करके छवियों पर फ्रेम प्रभाव

HTML

CSS

.loader {
  position: relative;
  width: 120px;
  height: 90px;
  margin: 0 auto;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background-color:#111111;

}
.loader:before {
  content: "";
  position: absolute;
  bottom: 30px;
  left: 50px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #cebebe;
  animation: loading-bounce 0.5s ease-in-out infinite alternate;
}

.loader:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 7px;
  width: 45px;
  border-radius: 4px;
  box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2;
  animation: loading-step 1s ease-in-out infinite;
}

@keyframes loading-bounce {
  0% {
    transform: scale(1, 0.7);
  }

40% {
    transform: scale(0.8, 1.2);
  }

60% {
    transform: scale(1, 1);
  }

100% {
    bottom: 140px;
  }
}

@keyframes loading-step {
  0% {
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0),
            0 10px 0 #f2f2f2,
            -35px 50px 0 #f2f2f2,
            -70px 90px 0 #f2f2f2;
  }

100% {
    box-shadow: 0 10px 0 #f2f2f2,
            -35px 50px 0 #f2f2f2,
            -70px 90px 0 #f2f2f2,
            -70px 90px 0 rgba(0, 0, 0, 0);
  }
}

अनुशंसित

HTML कोड प्लेसहोल्डर टिप्पणी

HTML हार्ट एनिमेशन डेटा स्ट्रीम

शुद्ध CSS का उपयोग करके छवियों पर फ्रेम प्रभाव

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS