لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

مولد مُلَفِّت SVG

مطورصورة

إعلان · حذف؟

مدخل

عملية تلقائية

نوع المُنْتَج

يكتب

الملاءمة

الحجم (بكسل)

عرض السطح (بكسل)

مُستخدم في المُنْتَجات المُبنية على المُلْفَّة (مُلْفَّة دائريّة، مُلْفَّة مُزدَّدَة، مُنْتَج شريط، مُنْتَج مُتَرَكّب).

اللون الأساسي

لون المسار / اللون الثانوي

لون المسار (مُلْفَّة دائريّة، مُلْفَّة مُزدَّدَة، مُنْتَج شريط) أو لون النقطة أو القوس الثانوي.

الرسوم المتحركة

السرعة (الثواني)

مدة دورة التمثيل الكامل، بالثواني.

انتاج |

شكل

مُلصق ARIA

الوصف المُتاح من قبل قارئ الشاشة.

انتاج

جانب العميل

إعلان · حذف؟

مرشد

مولد مُلَفِّت SVG

ابنِ مُنْتَجات SVG مُتَّسِقة ومُنْتَجَة بسرعة مباشرة في المتصفح، وانسخ نص مُعدّ للإدخال في مشروعك. اختر من بين سبعة أشكال شهيرة للمُنْتَجات، وضبط الحجم، والمسار، والألوان، وسرعة التمثيل، ثم راقب التحديثات في المُشاهد الحي. اختر تصدير كـ SVG مُدمج، أو كنص بسيط من HTML + CSS، أو كمُكوّن React (JSX).

كيفية استخدام

اختر نوع المُنْتَج — مُلْفَّة دائريّة، مُلْفَّة مُزدَّدَة، حلقة مُنْتَهَاة، نقاط تذبذب، نقاط تَرَكّب، مُنْتَج شريط، أو تأثير مُتَرَكّب.
تعديل الحجم, عرض المسار, اللون الأساسيو، و لون المسار / اللون الثانوي لتناسب علامة مُنتَجة.
اضبط سرعة التمثيل (بالثواني) لضبط سرعة التمثيل.
اختر — JSON للملف الأبسط للإطلاق، YAML للتحرير البشري، ملف JS عند الحاجة إلى منطق شرطي، أو مفتاح package.json عند الرغبة في تقليل عدد الملفات في المخزن.: SVG مُدمج (مُرَكَّب في ملف واحد، يمكن وضعه في أي مكان)، HTML + CSS (مُقسَّم إلى مُسْتَوِي)، أو مُكوّن React (JSX).
انسخ الكود المُولَّد من لوحة الإخراج أو احفظه كملف.

خصائص

سبعة أشكال مُنْتَجات — مُلْفَّة دائريّة، مُلْفَّة مُزدَّدَة، حلقة مُنْتَهَاة، نقاط تذبذب، نقاط تَرَكّب، مُنْتَج شريط، تأثير مُتَرَكّب.
مُشاهد تَمثيل حي على خلفية مُتَّسِقة بحيث يمكنك تقييم أي خيار لون في لحظة واحدة.
SVG مُدمج مُتَّسِق — يتم تضمين أسلوب التمثيل داخل SVG، لذا يعمل بدون ملف شكل خارجي.
HTML + CSS أخرج مع مُسْتَوِي منفصل عندما تفضل الاحتفاظ بالمُكوّنات والأسلوب منفصلين.
مُكوّن React (JSX) أخرج جاهزًا للإدخال في مشروع Next.js أو Vite أو Create React App.
مُعدّل حجم، وعرض، وألوان، وسرعة مع قيم منطقية وتحقق.
مُدمج للاستجابة — كل مُنْتَج يُوزع مع role="status" وأحد المُعدّلات aria-label لإبلاغ المُستخدم بحالة التحميل.
أسماء فئات مُحددة مُتَّسِق لكل نص، لذا لا يُحدث تداخل بين عدة مُنْتَجات في نفس الصفحة.

متى تُستخدم كل مُنْتَج؟

مُلْفَّة دائريّة / مُلْفَّة مُزدَّدَة — في حالات الانتظار غير المُحددة حيث لا يمكن معرفة التقدم (مكالمات API، انتقالات الصفحات).
حلقة مُنْتَهَاة — مؤشر "يُفكّر" كلاسيكي يُستخدم جيدًا مع التصميم الخفيف.
نُقطة تذبذب / نقاط تَرَكّب — في سياقات مُلائمة مثل مؤشرات "يُكتب" في الدردشة.
مُنْتَج شريط — في عمليات تحميل أو تحميل الملفات أو أي مكان تحتاج فيه مؤشرًا عريضًا منخفض المُستوى.
ريبِل — تغذية خفيفة وبيئية مثل اللحظات قبل ظهور المحتوى.

 التعليمات

لماذا تُستخدم SVG لتمثيل المُنْتَجات أثناء التحميل بدلًا من ملف GIF متحرك؟

لأن SVG هو تنسيق مُتجه، لذا تبقى المُنْتَجات مُتَّسِقة تمامًا في أي حجم وعند أي كثافة بيكسل. حجم الملفات صغير جدًا (غالبًا بسّعات مئات الأحرف)، ويمكن تغيير الألوان عبر CSS في الوقت الفعلي، ويمكن توقف أو استئناف أو تغيير التمثيل دون إعادة ترميز الملف. أما GIFs فهي تنسيق مُتَّسِق، أكبر حجمًا، وذات تلف عند الحواف، ومحظور على الألوان والسرعة التي تم تضمينها عند تصميم الملف.
ما الفرق بين مؤشر التحميل المُحدّد والغير مُحدّد؟

يُظهر المؤشر المُحدّد التقدم الحقيقي نحو مجموع معروف، مثل مساحة التقدم التي تملأ من 0 إلى 100. أما المؤشر غير المُحدّد، فهو يخبر المستخدم أن العمل يُجرى عندما لا يمكن قياس المدة أو التقدم — مثل الانتظار لاستجابة شبكة. معظم المُنْتَجات (الدوائر المُدور، النقط المُتذبذبة، الريّ) غير مُحدّدة؛ يمكن أن يكون مُنْتَج شريط مُحدّد أو غير مُحدّد، حسب ما إذا كان يُظهر قطعة متحركة أو تعبئة مُتَّسِقة.
متى يجب أن يظهر مؤشر التحميل؟

بشكل عام، لا تُظهر أي مؤشر لإجراءات تنتهي في أقل من 100 مللي ثانية — يشعر المستخدم بأن التفاعل سريع. بين 100 مللي ثانية وثانية واحدة، يكفي مؤشر مُدمج بسيط بالقرب من العنصر المُؤثر. بعد الثانية، استخدم مؤشرًا واضحًا. عند انتظار أكثر من 10 ثوانٍ، انتقل إلى مؤشر تقدم مُحدّد مع رسالة مفهومة، لأن المستخدم يبدأ في فقدان الثقة بأن النظام لا يزال يعمل.
كيف تعمل التمثيلات باستخدام CSS داخل SVG؟

تُستخدم التمثيلات باستخدام CSS على عناصر SVG بنفس الطريقة التي تُستخدم على عناصر HTML: تُكتب قاعدة keyframes وتم تطبيقها من خلال خاصية animation على فئة. تشمل الأهداف الشائعة تحويلات دوران للدوران، تغيير الشفافية للانسحاب، وstroke-dashoffset للتأثير على الدوائر والخطوط. لجعل التحول يدور حول المركز البصري للشكل، ضع transform-origin في هذا النقطة. تبقى التمثيلات المُعلنة داخل عنصر style داخل SVG مُقيّدة داخل هذا المستند، وهذا هو السبب الذي يجعل SVG المُدمج يعمل عند وضعه في أي صفحة.
كيف تُجعل مُنْتَج التحميل مُتاحًا للقراءات الصوتية؟

أضف إلى عنصر المُنْتَج خاصية role=status (أو role=progressbar للتقدم المُحدّد) بحيث يُعاملها الأدوات المساعدة كمنطقة حيّة. قدم ملخصًا قصيرًا وواضحًا مثل "يُحمّل" أو "يُحفظ" بحيث يُعلن الهدف، وتجنب الاعتماد على اللون فقط لنقل الحالة. بالنسبة للتقدم المُحدّد، ضع أيضًا aria-valuenow، aria-valuemin، وaria-valuemax بحيث يُعلن المُستوى المئوي أثناء التحديث.