सीएसएस के लिए एक अहम सलाह! ऐनिमेटेड लोडर

आइए, स्कोप वाली कस्टम प्रॉपर्टी और animation-timing-function का इस्तेमाल करके, ऐनिमेटेड सीएसएस लोडर बनाएं

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>

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

- 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)) का इस्तेमाल करें ✨

हो गया! 🎉

क्या आपको यह ट्वीट के फ़ॉर्मैट में चाहिए? 🐦

Stay Awesome! ʕ •ᴥ•ʔ