نصيحة سريعة بشأن خدمة مقارنة الأسعار (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)) للحصول على التأثير الصحيح ✨

تم! 🎉

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

مع أطيب التحيّات، ʕ •ᴥ•ʔ