तेज़ सीएसएस सलाह! एनिमेटेड लोडर

चलिए, स्कोप वाली कस्टम प्रॉपर्टी और ऐनिमेशन की टाइमिंग-फ़ंक्शन के साथ, ऐनिमेशन वाला सीएसएस लोडर बनाते हैं

Jhey Tompkins

CodePen पर जाएं और नया पेन बनाएं.

हमारे लोडर के लिए मार्कअप बनाएं. इनलाइन कस्टम प्रॉपर्टी के इस्तेमाल पर ध्यान दें:

<div class="loader" style="--count: 10">
  <span style="--index: 0"></span>
  <span style="--index: 1"></span>
  <span style="--index: 2"></span>
  <span style="--index: 3"></span>
  <span style="--index: 4"></span>
  <span style="--index: 5"></span>
  <span style="--index: 6"></span>
  <span style="--index: 7"></span>
  <span style="--index: 8"></span>
  <span style="--index: 9"></span>
</div>

लाइनों की संख्या कॉन्फ़िगर करने के लिए, जनरेटर (पग) का भी इस्तेमाल किया जा सकता है:

- const COUNT = 10
.loader(style=`--count: ${COUNT}`)
  - let i = 0
  while i < COUNT
    span(style=`--index: ${i}`)
    - i++

हमारे लोडर को कुछ शैलियां दें:

loader {
  --size: 10vmin;

  height: var(--size);
  position: relative;
  width: var(--size);
}

सटीक पोज़िशनिंग और transform के साथ calc के कॉम्बिनेशन का इस्तेमाल करके, हमारी लाइनों की पोज़िशन तय करें:

.loader span {
  background: grey;
  height: 25%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)
             rotate(calc(((360 / var(--count)) * var(--index)) * 1deg))
             translate(0, -125%);
  width: 10%;
}

--index के आधार पर ओपैसिटी लागू करें:

.loader span {
  opacity: calc(var(--index) / var(--count));
} 

इसे आज़माएं!

.loader {
  animation: spin 0.75s infinite steps(var(--count));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

सही इफ़ेक्ट पाने के लिए, steps(var(--count)) के इस्तेमाल पर ध्यान दें ✨

हो गया! 🎉

क्या आपको यह जानकारी ट्वीट फ़ॉर्म में पसंद है? 🐦

बेहतरीन बने रहें! •ᴥ• बच्चे