مولد مؤشرات التحميل CSS

كيفية استخدام مولد مؤشرات التحميل CSS

يبني مولّد أدوات التحميل CSS مؤشرات تحميل متحركة بـ CSS خالص — بلا صور ولا JavaScript ولا تبعيات. اختر واحدًا من عشرة أنماط، واضبط الحجم والسرعة والسماكة واللون، ثم انسخ HTML وCSS الناتجين مباشرة إلى مشروعك.

1. اضبط المعاملات العامة بالأدوات الأربع: «الحجم» يحدد صندوق كل مؤشر، «السرعة» تغيّر مدة الحركة، «السماكة» تتحكم في الحدود وعرض الأشرطة، و«اللون» يلوّن كل عنصر.
2. تصفح الشبكة: تبقى المؤشرات العشرة متحركة حية بإعداداتك الحالية فتقارنها بنظرة واحدة. انقر على أي مؤشر لاختياره.
3. تعرض لوحة التفاصيل المؤشر المختار بحجم أكبر، مع مقطع HTML الخاص به وCSS المطابق (بما في ذلك @keyframes التي يحتاجها).
4. اضغط «نسخ HTML» أو «نسخ CSS» لإرسال كل مقطع إلى الحافظة. إن كان CSS مكتفياً بذاته — الصقه في ورقة أنماطك وضع الـ HTML حيث يجب أن يظهر المؤشر.
5. غيّر أي معامل فتتحدث الشبكة ومعاينة التفاصيل وكلا مقطعي الشيفرة فورًا.

لأنها CSS خالصة، فإن المؤشرات لا تستهلك تقريبًا أي عرض نطاق وتبقى حادة على أي شاشة. اقرن الحركة بتسمية نصية لإمكانية الوصول، وتجنب المدد الأقصر من نحو 0.5 ثانية — المؤشرات التي تومض بسرعة مفرطة تثير القلق أكثر مما تطمئن.