कैसे करें - सीएसएस लोडर
CSS के साथ प्रीलोडर बनाने का तरीका जानें।
लोडर कैसे बनाएं
चरण 1) HTML जोड़ें:
उदाहरण
<div class="loader"></div>
चरण 2) सीएसएस जोड़ें:
उदाहरण
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation:
spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform:
rotate(360deg); }
}
उदाहरण समझाया गया
संपत्ति लोडर के borderसीमा आकार और सीमा रंग को निर्दिष्ट करती है। border-radiusसंपत्ति लोडर को एक सर्कल में बदल देती है ।
सीमा के अंदर घूमने वाली नीली चीज़ को
border-topसंपत्ति के साथ निर्दिष्ट किया जाता है। आप शामिल कर सकते हैं border-bottom, border-leftऔर/या
border-rightयदि आप और अधिक "स्पिनर" चाहते हैं (नीचे उदाहरण देखें)।
widthलोडर का आकार और heightगुणों के साथ निर्दिष्ट किया गया है।
अंत में, हम एक जोड़ते हैं जो animation2 सेकंड की एनीमेशन गति के साथ हमेशा के लिए नीली चीज को स्पिन करता है।
नोट: आपको उन ब्राउज़रों के लिए -webkit- उपसर्ग भी शामिल करना चाहिए जो एनिमेशन और ट्रांसफ़ॉर्म गुणों का समर्थन नहीं करते हैं। कैसे देखने के लिए उदाहरण पर क्लिक करें।
अधिक स्पिनर जोड़ें
उदाहरण
.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
}
उदाहरण
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
}
उदाहरण
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
}
एक और उदाहरण
लोडर को पेज के बीच में कैसे रखा जाए और लोडिंग पूरी होने पर "पेज कंटेंट" दिखाने का एक उदाहरण: