مؤشّر التقدّم
Progress Bar vs Spinner vs Ringrole="progressbar"
اسمه كمانشريط التقدّم، بروجرس بار، سبينر، مؤشّر التحميل، حلقة التقدّم، لودر، progress bar، spinner، loader، progress ring، activity indicator، loading indicator
مؤشّر التقدّم عنصر عرض يقول إن عملية تجري الآن، وكم بقي منها إن كان ذلك معلوماً. وهو ثلاثة أشكال لمعنيين اثنين: الشريط المحدّد (determinate) يعرف النسبة فيعرضها، والمؤشّر الدوّار (spinner) لا يعرفها فيقول «انتظر» ولا شيء غير ذلك، وحلقة التقدّم هي الشريط نفسه ملفوفاً في دائرة، واختيارها بدل الشريط قرار بصري لا يغيّر شيئاً في الدلالة ولا في ARIA. وقاعدة الاختيار زمنية لا ذوقية: لا تعرض شيئاً في أوّل ٤٠٠ ميلي ثانية تقريباً لأن مؤشّراً يومض ثم يختفي يُقرأ كخلل في الواجهة، والمؤشّر الدوّار يكفي حتى نحو أربع ثوانٍ، وما زاد على ذلك يحتاج شريطاً محدّداً بنسبة مئوية، وإن كان العمل غير قابل للقياس فسمِّ الخطوة الجارية بدل اختراع رقم. وهو ليس الهيكل العظمي (skeleton)، فذاك يرسم شكل المحتوى القادم في مكانه ليمنع قفزة التخطيط، أمّا مؤشّر التقدّم فيقيس زمناً. وليس شريط الخطوات (stepper)، لأن الخطوات تنقّل يملك المستخدم التحرّك فيه، بينما مؤشّر التقدّم قراءة لعمل لا يد له فيه. وليس المنزلق (slider): متى صار المستخدم قادراً على سحب القيمة فأنت أمام slider مهما كان الشكل، والفارق التقني أن progressbar لا يقبل التركيز ولا يقبل إدخالاً.
لو قلت عليه…
العيّنة الحيّة
تفاعل مع الديمو. كل الأجزاء حقيقية ومرقّمة.
aria-valuenow="5"يتحرّك كل ٥٪ لا مع كل إطارتشريح العنصر: كل جزء واسمه
مرّر على أي سطر ليتحدّد مكانه في الديمو فوق.
برومبت البناء
سلوكه في الاتجاه من اليمين لليسار
الجزء ده حصري عندنا.
اتجاه امتلاء الشريط
ينعكسالشريط يمتلئ من البداية المنطقية، أي من اليمين في العربية. وأضمن بناء لذلك عنصر تعبئة مثبّت بـ inset-inline-start: 0 تحرّك فيه inline-size من ٠٪ إلى القيمة، فينعكس من تلقاء نفسه لأن الحافّة التي رُسِي عليها هي التي تبدّلت. وإن أصررت على scaleX فاعلم أن transform-origin لا كلمة منطقية لها أصلاً: كلماتها فيزيائية (left و right و top و bottom و center) إلى جانب الأطوال والنِسَب، ومعنى ذلك أنك ستكتب transform-origin: right يدوياً داخل [dir="rtl"] أو تُشير المقياس بمتغيّر اتجاه.
زحف الشريط غير المحدّد
ينعكسالشريط غير المحدّد يمرّر شريحة قصيرة عبر المسار، وانطلاقها من البداية المنطقية هو ما يوافق القراءة. غير أن هذه الحركة مكتوبة داخل @keyframes بـ translateX، و transform خاصّية فيزيائية لا مكافئ منطقي لها في CSS كلّها، فالإطارات الثابتة تجعل الشريحة تزحف عكس اتجاه القراءة في العربية. اضرب الإزاحة في متغيّر إشارة: translateX(calc(var(--sweep) * var(--dir))) مع ضبط --dir: -1 داخل [dir="rtl"]، أو اكتب مجموعة @keyframes ثانية مقصورة على [dir="rtl"].
دوران المؤشّر
لا ينعكسالدوران ليس اتجاه قراءة، فالمؤشّر الدوّار يبقى كما هو حرفياً حين تنقلب الصفحة. الزاوية الموجبة في rotate() تدور مع عقارب الساعة في الاتجاهين معاً، والقاعدة الشاملة [dir="rtl"] svg { transform: scaleX(-1) } تقلبها إلى عكس عقارب الساعة وتنقل معها الطرف المستدير للقوس (stroke-linecap) إلى الجهة الأخرى، فيصير ذيل القوس مقدّمته. اقصر أي قلب على صنف تضعه على الأيقونات الاتجاهية وحدها، واترك المؤشّر الدوّار وأيقونة الساعة خارجه.
هندسة الحلقة مقابل تسميتها
لا ينعكسالحلقة مرسومة داخل نظام إحداثيات SVG، وخاصّية direction لا أثر لها على الهندسة هناك. لذلك تبقى نقطة بداية stroke-dashoffset في مكانها: المسار المكافئ لـ <circle> يبدأ عند أقصى يمين الدائرة ويسير مع عقارب الساعة، والدوران بـ rotate(-90) هو ما ينقل البداية إلى أعلاها، وهو قرار بصري ثابت لا لغة فيه. أمّا الرقم في وسط الحلقة فهو الجزء الذي يستجيب: نصّ HTML عادي يتبع اتجاه الصفحة، وإن رسمته بـ <text> داخل الـ SVG فقيمتا text-anchor: start و end تُحسبان من اتجاه النصّ نفسه فتتبادلان في RTL، فاستعمل text-anchor: middle أو ضع الرقم عنصر HTML فوق الحلقة.
الأرقام ونظام الترقيم
لا ينعكسالأرقام نفسها لا تنقلب: خانات العدد تُقرأ من اليسار إلى اليمين حتى داخل نصّ عربي، وخوارزمية Bidi تعامل الرقم كمقطع واحد. المشكلة الحقيقية خلط النظامين في الشاشة الواحدة، شريط يقول 42% وحلقة تقول ٤٢٪. ولّد كل رقم من مكان واحد: new Intl.NumberFormat("ar-EG", { style: "percent" }) يعطيك الأرقام العربية الهندية مع علامة النسبة ٪ (U+066A)، و ar-EG-u-nu-latn يعطيك أرقام ٠ إلى ٩ اللاتينية مع علامة % اللاتينية، لأن رمز النسبة يتبع نظام الترقيم لا اللغة. وأضف font-variant-numeric: tabular-nums حتى لا يتغيّر عرض الرقم مع كل تحديث فيهتزّ ما حوله.
أسماؤه في الكود
كل سطر هو كلمة مكتبة واحدة عن نفس الشيء. خد السطر اللي بيكلّم مشروعك.
شوف كمان
آخر تحديث · 2026-08-19