कैसे बनाया जाता है: CSS लोडर

CSS के द्वारा प्रीलोडर कैसे बनाया जाता है सीखें。

अपने आप साबित करें

लोडर कैसे बनाया जाता है

पहला कदम - HTML जोड़ें:

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

दूसरा कदम - CSS जोड़ें:

.loader {
  border: 16px solid #f3f3f3; /* हल्का ग्रे */
  border-top: 16px solid #3498db; /* नीला */
  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 विशेषता निर्दिष्ट करता है。

अंत में, हमने एक एनिमेशन जोड़ा है, जो नीला हिस्सा 2 सेकंड की एनिमेशन गति से हमेशा घूमता रहे।

ध्यान:जो इसे नहीं समर्थित करते हैं animation और transform विशेषता वाले ब्राउज़र, आपको एक और -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;
}

अपने आप साबित करें

एक और उदाहरण

लोडर को पृष्ठ के मध्य रखने के लिए कैसे करें और जब लोडिंग पूरा हो जाए तो 'पृष्ठ सामग्री' दिखाएं:

उदाहरण

अपने आप साबित करें