3D Slinky Motion Loader

Professional CSS Animation for Modern Websites

विवरण (Hindi) आज हम एक 3D Slinky Loader बनाएंगे जो बिल्कुल एक स्प्रिंग की तरह काम करता है। इसमें हमने CSS की 3D प्रॉपर्टीज का उपयोग किया है ताकि यह रियलिस्टिक लगे।

Description (English) Learn to create a 3D Slinky Loader that mimics a physical spring. We use CSS transform properties to achieve a realistic 3D flipping animation.

✨ Live Demo Preview

Step 1: HTML Structure

<div class="loader">
    <div class="slinky">
        <span></span><span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span><span></span>
    </div>
</div>

Step 2: CSS Styling

.loader {
    position: relative;
    width: 200px;
    height: 100px;
}
.slinky {
    position: relative;
    width: 70px;
    height: 30px;
    transform-style: preserve-3d;
}
.slinky span {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 3px solid #00d2ff;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0 0 10px #00d2ff, inset 0 0 10px #00d2ff;
    animation: slinky 2s linear infinite;
}
@keyframes slinky {
    0% { transform: translateX(0) translateY(0) rotateZ(0deg); z-index: 10; }
    20% { transform: translateX(0) translateY(-50px); }
    50% { transform: translateX(80px) translateY(-50px) rotateZ(180deg); }
    80% { transform: translateX(80px) translateY(-10px) rotateZ(200deg); }
    100% { transform: translateX(80px) translateY(0) rotateZ(180deg); z-index: 1; }
}
/* Adjusting delays for each ring */
.slinky span:nth-child(1) { animation-delay: 0.1s; }
.slinky span:nth-child(2) { animation-delay: 0.2s; }
.slinky span:nth-child(3) { animation-delay: 0.3s; }
.slinky span:nth-child(4) { animation-delay: 0.4s; }
.slinky span:nth-child(5) { animation-delay: 0.5s; }
.slinky span:nth-child(6) { animation-delay: 0.6s; }
.slinky span:nth-child(7) { animation-delay: 0.7s; }
.slinky span:nth-child(8) { animation-delay: 0.8s; }
.slinky span:nth-child(9) { animation-delay: 0.9s; }
.slinky span:nth-child(10) { animation-delay: 1s; }

How to Implement? (कैसे उपयोग करें?)

• Hindi: HTML कोड को अपनी वेबसाइट के `` टैग में पेस्ट करें। फिर CSS कोड को `