نصيحة سريعة بشأن خدمة مقارنة الأسعار (CSS) أداة تحميل الصور المتحركة

لننشئ أداة تحميل CSS متحركة باستخدام خصائص مخصصة محددة ووظيفة توقيت الرسوم المتحركة

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);
}

ضع الأسطر باستخدام تحديد الموضع المطلق وتركيبة calc مع transform:

.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))" للحصول على التأثير الصحيح ✨

تم! 🎉

هل تريد تفضيل ذلك في نموذج التغريدة؟ 🐦

ابقَ رائعًا! ` ᴥ•`