لننشئ أداة تحميل CSS متحركة باستخدام خصائص مخصصة محددة ووظيفة توقيت الرسوم المتحركة
انتقِل إلى 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))
" للحصول على التأثير الصحيح ✨
تم! 🎉
هل تريد تفضيل ذلك في نموذج التغريدة؟ 🐦
ابقَ رائعًا! ` ᴥ•`