लोड हो रहा है

891 tousgreg

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

अनुशंसित

22 August 2024

3डी होवर प्रभाव के साथ एनिमेटेड कार्ड

19 November 2024

होम डिजिटल घड़ी

16 October 2025

CSS एनिमेशन उदाहरण: लोडिंग, क्यूब्स, स्फेयर्स

HTML

CSS

body {
  background: #060b10;
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  color: #0ff;
}

.loader-container {
  perspective: 800px;
  text-align: center;
}

.loader-3d {
  width: 320px;
  height: 35px;
  background: #111;
  border-radius: 30px;
  box-shadow: inset 0 0 20px #0ff3, 0 0 10px #0ff2;
  overflow: hidden;
  transform: rotateX(12deg) rotateY(8deg);
  position: relative;
}

.bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00f, #0ff);
  border-radius: 30px;
  box-shadow: 0 0 25px #0ff;
  position: relative;
  transition: width 0.2s ease;
}

.glow {
  position: absolute;
  top: 0;
  left: -100px;
  width: 100px;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(0,255,255,0.1) 80%);
  animation: moveGlow 2s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes moveGlow {
  0% { left: -100px; }
  100% { left: 100%; }
}

#percent {
  font-size: 1.5em;
  margin-top: 20px;
  text-shadow: 0 0 10px #0ff;
}

अनुशंसित

3डी होवर प्रभाव के साथ एनिमेटेड कार्ड

होम डिजिटल घड़ी

CSS एनिमेशन उदाहरण: लोडिंग, क्यूब्स, स्फेयर्स

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS