مولد تفاعل تحميل CSS
مرشد
مولد تفاعل تحميل CSS
توليد ثمانية تفاعلات تحميل شائعة بالكامل باستخدام CSS — حلقة تدويرية، حلقة مزدوجة، أقطار تنبض، أقطار ترتفع وتنخفض، كرة ترتفع وتنخفض، أعمدة مُوازية، دائرة تنبض، ومُشير تحرير النص. تغيير لون، حجم، عرض السطح، ومدة التفاعل؛ رؤية التحديث الفوري للعرض؛ نسخ المقطع @keyframes + HTML الأدنى إلى مشروعك. لا يحتوي على JavaScript، لا يحتوي على SVG، لا يحتوي على اعتماد خارجي.
كيفية استخدام
- اختر نوع التفاعل من القائمة المنسدلة.
- حدد حجم المُحَوِّل بالبكسل وقم بتعديل عرض السطح للأنواع المبنية على الحلقة.
- اختر لونًا أساسيًا ولونًا لمسار / ثانويًا.
- حدد المدة (بالثواني) لدورة التفاعل الكاملة.
- اختر نمط الإخراج — مدمج HTML + CSS، أو CSS فقط، أو HTML فقط.
- أضف وصفًا مخصصًا للقراءة من الشاشة اختياريًا.
- انسخ المقطع المُولَّد أو احفظه كملف.
خصائص
- أربعة أنماط تفاعلية — تغطي الأنماط الشائعة في واجهات المستخدم الحديثة.
- العرض المباشر — كل تغيير يُعيد التصوّر فورًا بحيث يمكنك التحقق من سلامة التوقيت والانسجام قبل النسخ.
- مخرج بسيط من CSS — لا توجد تكلفة لتشغيل JavaScript ولا حاجة لحفظ مُوَّسِعات SVG.
- أسماء فئات مُحددة — يستخدم كل مقطع مُولَّد تسمية فريدة بحيث يمكن أن توجد عدة مُحَوِّلات دون تعارض.
- مُتاح بسهولة — يحتوي كل مُحَوِّل على دور "حالة" ووصف مُخصص لـ aria-label.
- ثلاثة أنماط إخراج — مدمج HTML + CSS، أو CSS فقط، أو HTML فقط، حسب طريقة تكامله.
التعليمات
-
ما الذي يفعله @keyframes في CSS؟
يُحدد مُلصق @keyframes الخطوات الوسيطة في تفاعل CSS. كل خطوة (0%، 50%، 100%، إلخ) يصف الأسلوب الذي يجب أن يمتلكه العنصر في تلك اللحظة من دورة التفاعل. يُحلل المُستعرض بين الخطوات لتقديم حركة سلسة. بدون @keyframes، لا يوجد شيء يُلعب في خاصية التفاعل.
-
لماذا نستخدم تفاعلات CSS بدلًا من SVG أو JavaScript للحواسيب؟
تُجرى تفاعلات CSS على خيط التجميع في المتصفح، مما يعني أنها تستمر بسلاسة حتى لو كان خيط JavaScript مُشغولًا. لا يحتوي على اعتماد على السكربت، ولا يحمل تحميلًا إضافيًا، ولا يُفقد على الأجهزة القديمة. يمكن للـ SVG وJavaScript أن يفعلوا أشياء أكثر تعقيدًا، ولكن بالنسبة لـ مُحَوِّل بسيط مثل الدائرة المُدوّرة أو الأقطار المُرتفعة، فإن CSS هو الخيار الأخف والأكثر موثوقية.
-
ما هو دالة التوقيت الكُبْرية (cubic-bezier)؟
تُصف دالة التوقيت الكُبْرية كيفية تسارع وتبطئ التفاعل مع الزمن باستخدام أربع نقاط تحكم على منحنى. مقارنة مع كلمات مثل "مُتَوازٍ" أو "ease-in-out"، تتيح لك دالة التوقيت الكُبْرية تخصيص شعور الحركة — على سبيل المثال، يستخدم توازن الكرة دالة التوقيت الكُبْرية (0.5، 0.05، 0.5، 0.95) لمحاكاة الجاذبية.
-
لماذا تحتاج التفاعلات التحميل إلى دور ووصف aria-label؟
لا يمكن لقارئ الشاشة أن يرى دائرة تدور، لذا يحتاج إلى معلومة برمجية توضح أن شيئًا ما يحدث. دور "الحالة" يخبر التقنيات المساعدة أن العنصر ينقل تحديثًا حيًا، ووصف aria-label يوفر النص القابل للقراءة الذي يُعلن. بدون هذه السمات، يصبح المُحَوِّل غير مرئي للمستخدمين الذين لا يُرى.
تثبيت ملحقاتنا
أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
أدوات يجب تجربتها
عرض الكلشارك
ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة
