مؤشر التقدم
يبيّن إلى أين وصلت مهمة، أو أنها جارية حين يكون مقدار ما أُنجز مجهولًا، في صورة شريط أو حلقة.
- الفئة
- التواصل
- الرموز
comp.progress-indicator- المستوى
- أساسي
- Web
tanrei-progress-indicatorschedule - SwiftUI
TanreiProgressIndicatorschedule - Jetpack Compose
TanreiProgressIndicatorschedule - Flutter
TanreiProgressIndicatorschedule - React Native
ProgressIndicatorschedule
مولَّد من docs/status/status.json, specs/progress-indicator.spec.json
خطي ودائري
عيّنتا Web و React تعرضان المواصفة الحالية. أما SwiftUI و Compose و Flutter و React Native فمتأخرة: ليس فيها separation بعد، وعيّناتها تعرض ما تقدّمه فعلًا.
<tanrei-progress-indicator value="0.4" label="جارٍ رفع report.pdf"></tanrei-progress-indicator>
<tanrei-progress-indicator value="3" max="10" value-text="3 من 10 ملفات" label="جارٍ الرفع"></tanrei-progress-indicator>
<!-- بلا value: غير محدَّد المقدار، مثل <progress> بلا قيمة. -->
<tanrei-progress-indicator variant="circular" size="small" label="جارٍ المزامنة"></tanrei-progress-indicator>
<!-- فجوة بين المؤشر وبقية المسار، أيًّا كان ما اختاره نظام التصميم. -->
<tanrei-progress-indicator separation="gap" value="0.4" label="جارٍ رفع report.pdf"></tanrei-progress-indicator>
<script type="module">
import '@tanrei/web/components/progress-indicator';
const bar = document.querySelector('tanrei-progress-indicator');
bar.value = sent / total;
</script>import { ProgressIndicator } from '@tanrei/react';
<ProgressIndicator value={sent / total} label="جارٍ رفع report.pdf" />
<ProgressIndicator value={files} max={10} valueText={`${files} من 10 ملفات`} label="جارٍ الرفع" />
<ProgressIndicator variant="circular" size="small" value={null} label="جارٍ المزامنة" />
<ProgressIndicator separation="gap" value={sent / total} label="جارٍ رفع report.pdf" />import Tanrei
TanreiProgressIndicator("جارٍ رفع report.pdf", value: sent / total)
TanreiProgressIndicator("جارٍ الرفع", value: Double(files), in: 0...10, currentValueLabel: "\(files) من 10 ملفات")
// بلا قيمة (الافتراضي): غير محدَّد المقدار.
TanreiProgressIndicator("جارٍ المزامنة", variant: .circular, size: .small)import io.github.chnotchy.tanrei.components.TanreiProgressIndicator
import io.github.chnotchy.tanrei.components.TanreiProgressIndicatorVariant
import io.github.chnotchy.tanrei.tokens.TanreiProgressIndicatorSize
// progress دالة lambda: القيمة الجديدة تعيد الرسم من دون إعادة التركيب.
TanreiProgressIndicator(progress = { sent / total }, contentDescription = "جارٍ رفع report.pdf")
TanreiProgressIndicator(
progress = { files.toFloat() },
contentDescription = "جارٍ الرفع",
valueRange = 0f..10f,
stateDescription = "$files من 10 ملفات",
)
// الصيغة التي بلا progress غير محدَّدة المقدار.
TanreiProgressIndicator(
contentDescription = "جارٍ المزامنة",
variant = TanreiProgressIndicatorVariant.Circular,
size = TanreiProgressIndicatorSize.Small,
)import 'package:tanrei/tanrei.dart';
TanreiProgressIndicator(value: sent / total, semanticsLabel: 'جارٍ رفع report.pdf');
TanreiProgressIndicator(
value: files.toDouble(),
max: 10,
semanticsValue: '$files من 10 ملفات',
semanticsLabel: 'جارٍ الرفع',
);
// value: null (الافتراضي) غير محدَّد المقدار.
const TanreiProgressIndicator(
variant: TanreiProgressIndicatorVariant.circular,
size: TanreiProgressIndicatorSize.small,
semanticsLabel: 'جارٍ المزامنة',
);import { ProgressIndicator } from '@tanrei/react-native';
<ProgressIndicator accessibilityLabel="جارٍ رفع report.pdf" value={sent / total} />
<ProgressIndicator accessibilityLabel="جارٍ الرفع" value={files} max={10} valueText={`${files} من 10 ملفات`} />
<ProgressIndicator accessibilityLabel="جارٍ المزامنة" variant="circular" size="small" />الأحجام وطرفا المدى ومدى مخصص
الفصل: فاصل (اختيار النظام الافتراضي) وفجوة
البنية
البنية
linear-determinate كما ترسمه حزمة الويب.| الجزء | الوصف |
|---|---|
1 track | The full length of the bar, or the full circle of the ring: the whole of the task. |
2 indicator | The part of the track drawn in the indicator color: the fraction done (determinate), or a moving segment or arc (indeterminate). It meets the rest of the track, or stands a gap from it (separation). |
3 stop-indicator · اختياري | A dot at the end of a determinate bar's track that marks where the task ends. Drawn under either separation whenever its size is above 0; 0 draws none. |
الخصائص
| الخاصية | النوع | القيمة الافتراضية | الوصف |
|---|---|---|---|
variant | linear | circular | "linear" | Linear is a bar that fills the width its layout gives it, for content and pages; circular is a ring of a fixed size, for tight places and next to text. A structural choice drawn by code, not a token axis: a design system cannot add a form by values. |
size | small | medium | large | "medium" | The bar's thickness (2 / 4 / 8) or the ring's box (16 / 24 / 40). A design system may add values. |
separation | auto | divider | gap | "auto" | How a determinate indicator is told from the rest of its track. divider: it is drawn on the track with no space between them. gap: empty space is left between them. Whether a bar marks the track's end with a dot is comp.progress-indicator.stop-indicator.size, not the separation. Auto takes comp.progress-indicator.track.separation, the design system's answer (divider in the default system). |
value | number | null | How far the task has come, between min and max. Null makes the indicator indeterminate. |
min | number | 0 | The value at which nothing is done. |
max | number | 1 | The value at which the task is done. |
label | string | "" | The accessible name: what is in progress ("Uploading report.pdf"). Required: a bar alone is not a name. |
valueText | string | "" | How assistive technology reads the value when a percentage is not the natural reading ("3 of 10 files"). Empty reads the platform's percentage. |
الحالات
السلوك
متطلبات بصيغة EARS. يُختبر تنفيذ كل منصة مقابل هذه المعرّفات. يُعرض نص المتطلبات كما ورد في ملف المواصفة، بالإنجليزية.
| المعرّف | المتطلب |
|---|---|
PRG-1 | WHILE value is a number THE progress indicator SHALL be determinate and draw the indicator over the fraction (value − min) / (max − min) of the track, from the track's start: the inline-start of a bar, the top of a ring, turning clockwise. |
PRG-2 | WHILE value is null THE progress indicator SHALL be indeterminate: a bar SHALL move a segment of the indicator, two fifths of the track long, from beyond the track's start to beyond its end once per comp.progress-indicator.motion.cycle-duration with comp.progress-indicator.motion.cycle-easing; a ring SHALL turn an arc of the indicator a quarter of the circle long clockwise once per comp.progress-indicator.motion.cycle-duration at constant speed (sys.motion.easing.linear). |
PRG-3 | THE progress indicator SHALL draw a bar comp.progress-indicator.linear.thickness.medium high for medium (and so on for each size) across the full inline size its layout gives it, and a ring whose outer edge fills a comp.progress-indicator.circular.size.medium square with a stroke of comp.progress-indicator.circular.thickness.medium for medium (and so on for each size). |
PRG-4 | THE progress indicator SHALL draw the track in comp.progress-indicator.track.color and the indicator over it in comp.progress-indicator.indicator.color; the ends of a bar's track and indicator SHALL be rounded by comp.progress-indicator.track.shape, clamped to half the thickness, and a ring's arcs SHALL have round caps unless comp.progress-indicator.track.shape is sys.shape.corner.none. |
PRG-5 | WHILE determinate, its separation is gap (PRG-17) and value lies strictly between min and max THE progress indicator SHALL leave comp.progress-indicator.track.gap of empty space, measured along the track, between the indicator and the rest of the track — on a bar between the indicator's end and the track, on a ring at both ends of the indicator's arc. WHILE its separation is divider THE progress indicator SHALL draw the indicator on the track with no empty space between them: the edge where the indicator's color ends is what divides them. WHILE a bar is determinate THE progress indicator SHALL draw, under either separation, a dot of comp.progress-indicator.stop-indicator.size, and no larger than the bar is thick, in comp.progress-indicator.indicator.color centered in the thickness with its center half the thickness before the track's end (concentric with the track's rounded end); it SHALL NOT be drawn while value is at max, where the indicator covers it, and a size of 0 SHALL draw none. Whether the dot is drawn is independent of the separation. |
PRG-6 | WHEN value changes while determinate THE progress indicator SHALL move the indicator's end to the new value over comp.progress-indicator.motion.value-duration with comp.progress-indicator.motion.value-easing; a switch between determinate and indeterminate SHALL take effect at once. |
PRG-7 | WHERE reduced motion is requested THE progress indicator SHALL show a value change at once, and WHILE indeterminate SHALL NOT move: it SHALL draw the indicator over the whole track (the whole circle of a ring) and ease its opacity from 1 to 0 and back to 1 once per comp.progress-indicator.motion.cycle-duration with comp.progress-indicator.motion.cycle-easing, over a track that stays still. |
PRG-8 | WHILE value is a number THE progress indicator SHALL expose the progressbar role to assistive technology with label as its name, min and max as its range, the clamped value as its current value, and valueText as the value's text when valueText is not empty. |
PRG-9 | WHILE value is null THE progress indicator SHALL expose the progressbar role with label as its name, no current value, and the platform's busy or indeterminate state. |
PRG-10 | THE progress indicator SHALL NOT be focusable and SHALL NOT announce value changes by itself; assistive technology SHALL read the current value when it reaches the indicator, and a platform that marks frequently updating elements SHALL mark it so. |
PRG-11 | IF value is below min or above max THE progress indicator SHALL draw and expose it clamped to that range; IF max is not greater than min THE progress indicator SHALL draw the track with no indicator and expose a current value of 0 in a range of 0 to 1; in each case debug builds SHALL report the values. |
PRG-12 | WHEN size names a value that the active design system does not have, or variant or separation a value the component does not define, THE progress indicator SHALL render with the default value's tokens (medium, linear, auto), and in debug builds report the unknown value. |
PRG-13 | WHERE the layout direction is right-to-left THE progress indicator SHALL fill a bar and move its indeterminate segment from right to left; a ring SHALL NOT be mirrored: it starts at the top and turns clockwise in every direction, as a clock does. |
PRG-14 | WHILE the progress indicator is not visible (scrolled out of view, in a hidden view, or in an app in the background) THE progress indicator SHALL NOT run its indeterminate animation, and SHALL resume it when it becomes visible. |
PRG-15 | WHILE label is empty THE progress indicator SHALL still render, and in debug builds report that it has no accessible name. |
PRG-16 | THE progress indicator SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the progress indicator is shown THE progress indicator SHALL draw itself for the new direction at once, without a motion of its own, keeping its value, and the place of an indeterminate segment in its cycle. |
PRG-17 | THE progress indicator SHALL tell a determinate indicator from the rest of its track as its separation names: WHILE separation is auto, as comp.progress-indicator.track.separation names, which follows sys.behavior.separation unless a design system sets it apart; WHILE separation is divider or gap, as that value names, whatever the tokens say; each as PRG-5 draws it. WHEN separation, or the token it follows, changes THE progress indicator SHALL draw the other form at once, without animation, keeping its value. WHILE indeterminate THE progress indicator SHALL be drawn the same under either (PRG-2, PRG-7). A platform that cannot draw a choice SHALL fall back to the first value, divider, and state that in its README. |
PRG-18 | WHERE the platform has ARIA attributes (the web), the host carries its progressbar role (PRG-8) itself, so what the product writes on it is not moved, but for a name: WHILE label is not empty THE progress indicator SHALL hold the product's aria-label and aria-labelledby on that host as their data-aria- twins, so that label is its whole name although the platform gives aria-labelledby the precedence, and WHEN label is emptied SHALL give them back as they were written; WHILE label is empty a name the product gives so — aria-label, or aria-labelledby naming an element — SHALL be its name and SHALL NOT be reported as having none in debug builds (PRG-15). WHEN the product removes one, or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaLabelledByElements) to null, THE progress indicator SHALL take it away. |
مطابقة الأسماء بين المنصات
التكافؤ لا يعني واجهات برمجية متطابقة. تعبّر كل منصة عن العقد نفسه بأسلوبها.
| المواصفة | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| المكوّن | tanrei-progress-indicator | TanreiProgressIndicator | TanreiProgressIndicator | TanreiProgressIndicator | ProgressIndicator |
variant · الخاصية | variant | variant | variant | variant | variant |
size · الخاصية | size | size | size | size | size |
separation · الخاصية | separation | separation | separation | separation | separation |
value · الخاصية | value | value | progress | value | value |
min · الخاصية | min | bounds | valueRange | min | min |
max · الخاصية | max | bounds | valueRange | max | max |
label · الخاصية | label | label | contentDescription | semanticsLabel | accessibilityLabel |
valueText · الخاصية | valueText | currentValueLabel | stateDescription | semanticsValue | valueText |
| ملاحظات | As a native <progress>: no value attribute (or removing it) is indeterminate. valueText is the value-text attribute. The host carries role="progressbar" and the aria-value attributes. separation is an attribute (auto, divider, gap); auto reads the name in --tanrei-comp-progress-indicator-track-separation. | Initialisers follow ProgressView: TanreiProgressIndicator(_ label:, value: Double?, in bounds: ClosedRange<Double> = 0...1, currentValueLabel:). value: nil is indeterminate; bounds carries min and max as Slider's in: does. Not built on this platform yet: separation (auto, divider, gap), PRG-17 and the seven gap and divider fixtures; reading comp.progress-indicator.track.separation as a typed choice needs the token emitters to write a choice of kind as a typed enumeration, which they do not yet. Not built on this platform yet: the stage color a fixture's surface names, which the linear-on-container-highest fixture draws on. | Two overloads, as Material's indicators have: with progress: () -> Float it is determinate (a lambda, so a changing value redraws without recomposing), read within valueRange: ClosedFloatingPointRange<Float> = 0f..1f (as Slider names it); without progress it is indeterminate. stateDescription is the semantics property of the same name. Not built on this platform yet: separation (auto, divider, gap), PRG-17 and the seven gap and divider fixtures; reading comp.progress-indicator.track.separation as a typed choice needs the token emitters to write a choice of kind as a typed enumeration, which they do not yet. Not built on this platform yet: the stage color a fixture's surface names, which the linear-on-container-highest fixture draws on. | As Flutter's ProgressIndicator: value: null is indeterminate, and semanticsLabel / semanticsValue are its names. Unlike Flutter's (a fraction from 0 to 1), value is read between min and max, as Slider does. Not built on this platform yet: separation (auto, divider, gap), PRG-17 and the seven gap and divider fixtures; reading comp.progress-indicator.track.separation as a typed choice needs the token emitters to write a choice of kind as a typed enumeration, which they do not yet. Not built on this platform yet: the stage color a fixture's surface names, which the linear-on-container-highest fixture draws on. | value undefined or null is indeterminate. min, max, value and valueText are passed together as accessibilityValue ({ min, max, now, text }); indeterminate sets accessibilityState={{ busy: true }} and no now. Not built on this platform yet: separation (auto, divider, gap), PRG-17 and the seven gap and divider fixtures; reading comp.progress-indicator.track.separation as a typed choice needs the token emitters to write a choice of kind as a typed enumeration, which they do not yet. Not built on this platform yet: the stage color a fixture's surface names, which the linear-on-container-highest fixture draws on. |
الرموز
| الرمز | يشير إلى | القيمة المحلولة (فاتح) |
|---|---|---|
--tanrei-comp-progress-indicator-circular-size-large | — | 40px |
--tanrei-comp-progress-indicator-circular-size-medium | — | 24px |
--tanrei-comp-progress-indicator-circular-size-small | — | 16px |
--tanrei-comp-progress-indicator-circular-thickness-large | sys.border.thick | 2px |
--tanrei-comp-progress-indicator-circular-thickness-medium | sys.border.thick | 2px |
--tanrei-comp-progress-indicator-circular-thickness-small | sys.border.thick | 2px |
--tanrei-comp-progress-indicator-indicator-color | sys.color.primary | |
--tanrei-comp-progress-indicator-linear-thickness-large | — | 8px |
--tanrei-comp-progress-indicator-linear-thickness-medium | — | 4px |
--tanrei-comp-progress-indicator-linear-thickness-small | — | 2px |
--tanrei-comp-progress-indicator-motion-cycle-duration | sys.motion.duration.extra-long4 | 1000ms |
--tanrei-comp-progress-indicator-motion-cycle-easing | sys.motion.easing.standard | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-progress-indicator-motion-value-duration | sys.motion.duration.medium2 | 300ms |
--tanrei-comp-progress-indicator-motion-value-easing | sys.motion.easing.standard | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-progress-indicator-stop-indicator-size | sys.space.space0 | 0px |
--tanrei-comp-progress-indicator-track-color | sys.color.surface-variant | |
--tanrei-comp-progress-indicator-track-gap | sys.space.space50 | 4px |
--tanrei-comp-progress-indicator-track-separation | sys.behavior.separation | 0 |
--tanrei-comp-progress-indicator-track-shape | sys.shape.corner.full | 9999px |
نماذج الاختبار
عروض مرجعية. تلتقط كل المنصات لقطة لكل نموذج بالمعرّف نفسه حتى يمكن مقارنة النتائج.
size: small (3)
linear-small
variant: linear size: small value: 0.4 label: Uploading linear-gap-small
variant: linear size: small separation: gap value: 0.4 label: Uploading circular-small
variant: circular size: small value: 0.4 label: Uploading size: medium (12)
linear-determinate
variant: linear value: 0.4 label: Uploading linear-on-container-highest
variant: linear value: 0.4 label: Uploading linear-indeterminate
variant: linear label: Uploading linear-empty
variant: linear value: 0 label: Uploading linear-full
variant: linear value: 1 label: Uploading linear-range
variant: linear value: 3 min: 0 max: 10 label: Uploading valueText: 3 of 10 files linear-gap
variant: linear separation: gap value: 0.4 label: Uploading linear-gap-full
variant: linear separation: gap value: 1 label: Uploading linear-divider
variant: linear separation: divider value: 0.4 label: Uploading circular-determinate
variant: circular value: 0.4 label: Uploading circular-indeterminate
variant: circular label: Uploading circular-gap
variant: circular separation: gap value: 0.4 label: Uploading size: large (4)
linear-large
variant: linear size: large value: 0.4 label: Uploading linear-gap-large
variant: linear size: large separation: gap value: 0.4 label: Uploading circular-large
variant: circular size: large value: 0.4 label: Uploading circular-gap-large
variant: circular size: large separation: gap value: 0.4 label: Uploading مولَّد من specs/progress-indicator.spec.json, tokens/comp/progress-indicator.tokens.json, design/tokens/
استخدم مؤشر التقدم لمهمة تطول حتى تُلحَظ: رفع، أو استيراد، أو نشر، أو حفظ طويل. بيِّن إلى أين وصلت متى استطعت قياس ذلك ولو تقريبًا؛ فالناس ينتظرون بصبر أكبر أمام شريط يتحرك. وحين لا تستطيع قياسه بعد، اعرضه غير محدَّد المقدار، وانتقل إلى قيمة فور أن تتوفر لك.
للانتظار القصير الذي لا تستطيع قياس طوله، كقائمة تجلب صفحتها التالية، استخدم مؤشر التحميل بدلًا منه. ليس له مسار، لأنه لا يَعِد بقيمة أبدًا.
| الطراز (variant) | يُستخدم لـ |
|---|---|
| خطي (linear) | المهام التي تخص صفحة أو قسمًا: في أعلى الصفحة، داخل بطاقة، تحت ملف في قائمة رفع. يملأ الشريط العرض الذي يعطيه إياه تخطيطه. |
| دائري (circular) | المواضع الضيقة والتقدم بجانب النص: في زر، في صف قائمة، في لوحة صغيرة. للحلقة مقاس ثابت. |
| الحجم | ثخانة الشريط / مقاس الحلقة في النظام الافتراضي | يُستخدم لـ |
|---|---|---|
| صغير (small) | 2 / 16 | الصفوف الكثيفة، داخل عناصر التحكم، بجانب النص الصغير. |
| متوسط (medium) | 4 / 24 | معظم المواضع. وهو الافتراضي. |
| كبير (large) | 8 / 40 | المهمة الوحيدة التي يدور حولها العرض، أو قسم فارغ ينتظر محتواه. |
يُفرَّق المؤشر المحدَّد المقدار عن بقية مساره بإحدى طريقتين. مع divider يُرسم على المسار بلا مسافة بينهما. ومع gap تُترك بعده مسافة فارغة صغيرة، وفي الحلقة عند طرفي قوسه كليهما. والمؤشر غير المحدَّد المقدار يبدو واحدًا في الحالتين. أما أن يعلّم الشريط نهاية مساره بنقطة فاختيار مستقل، هو حجم مؤشر التوقف: نظام التصميم الذي يعطيه حجمًا يرسم النقطة مع أيٍّ من الطريقتين، والنظام الافتراضي لا يرسمها.
يختار نظام التصميم مرة واحدة لكل مكوّن له هذا الاختيار، والنظام الافتراضي يختار الفاصل. اترك separation على auto لتتبع ذلك الاختيار، فيتوافق المؤشر مع مجموعات الأزرار وقوائم الخيارات من حوله. ولا تعيِّن divider أو gap على مؤشر واحد إلا حين يكون لذلك المؤشر سبب ليختلف.
- أعطِه تسمية تقول ما الذي يجري: «جارٍ رفع report.pdf»، لا «التقدم». وإن عُرض بجانبه شرح فاستخدم الكلمات نفسها.
- استخدم نص القيمة حين لا تكون النسبة المئوية هي القراءة الطبيعية: «3 من 10 ملفات»، «الخطوة 2 من 4».
- أخبر الناس متى تنتهي المهمة، بالكلمات: رسالة بأنها تمّت، أو بما الخطأ الذي وقع وما الذي يُفعل بعده.
- لا تستخدم اللون للتبليغ عن فشل. الشريط الأحمر لا يقول شيئًا لمن لا يرى اللون؛ أوقف المؤشر واعرض رسالة بجانبه.
- لا تستخدمه مقياسًا لمستوى، كمساحة التخزين المستخدمة أو قوة كلمة المرور. ذاك عدّاد (meter)، وهو مكوّن آخر.
- لا تدع القيمة ترجع إلى الوراء ولا تقفز إلى النهاية قبل أن تتم المهمة. الشريط وعد بما بقي من الانتظار.
- لا تعرض عدة مؤشرات لمهمة واحدة. اعرض واحدًا للكل، أو واحدًا لكل عنصر يهم الشخص.
- الدور
progressbar- التسمية
- label is the accessible name. valueText, when given, replaces the platform's percentage as the spoken value. A visible caption next to the indicator is the product's composition; when it exists, use the same words as label.
- الحد الأدنى للهدف
- تستوفي مساحة اللمس الحد الأدنى لحجم الهدف حتى لو كان الحجم المرئي أصغر. minimum 32px · pointer 44px · spacing 8px · touch 48px
لوحة المفاتيح
| المفاتيح | الإجراء |
|---|
ملاحظات
- Not interactive: the indicator takes no input and is never focusable (PRG-10), so the minimum target holds without extending anything.
- The value is read from the boundary between indicator and track: comp.progress-indicator.indicator.color must stay at least 3:1 against comp.progress-indicator.track.color and against the surface behind it, under divider and under gap alike. A faint track may leave the track's end hard to see; the stop indicator, in a system that gives it a size, marks it.
- Indeterminate is announced as busy with no value: on the web a progressbar without aria-valuenow (and aria-busy), on Apple platforms a progress element with no value, on Android the indeterminate range info, in Flutter a progress indicator with a null value.
- Reduced motion replaces movement with an opacity pulse of at most one per second (PRG-7), below the three-per-second flash threshold.
مولَّد من specs/progress-indicator.spec.json, tokens/sys/measure.tokens.json
- يعرض دور شريط التقدم (progress bar) والتسمية اسمًا له. وهو محدَّد المقدار يعرض المدى والقيمة الحالية (محصورة في المدى) ونص القيمة إن وُجد؛ وهو غير محدَّد المقدار لا يعرض قيمة ويعرض حالة الانشغال (busy) في المنصة. ليس في Flutter دور شريط تقدم ولا حالة انشغال بعد، فيعرض هناك التسمية والقيمة.
- لا يقبل التركيز أبدًا، ولا يُعلِن تغيّراته. تقرأ التقنيات المساعدة القيمة الحالية حين يصل الشخص إليه.
- حين يُطلب تقليل الحركة يظهر تغيّر القيمة فورًا، وتتوقف الهيئة غير المحدَّدة المقدار عن الحركة وتنبض عتامتها برفق بدلًا من ذلك، مرة في الثانية على الأكثر.
- تتوقف حركته المتكررة ما دام لا يُرى، وتُستأنف حين يُرى: في تطبيق في الخلفية في كل مكان، وحين يُمرَّر خارج مجال الرؤية أو يكون على شاشة مخفيّة حيث تستطيع المنصة أن تعرف ذلك.
- التسمية الفارغة، والقيمة الخارجة عن المدى، وقيمة
separationغير المعروفة يُبلَّغ عنها في بنيات التنقيح (debug).
- أعلِن نهاية المهمة بنفسك: رسالة في منطقة حيّة (live region)، أو نقل التركيز إلى النتيجة. المؤشر لن يقول إن المهمة تمّت أو فشلت.
- أبقِ لون المؤشر بتباين 3:1 على الأقل مقابل المسار والسطح الذي خلفه إن غيّرتهما، مع الفاصل ومع الفجوة على السواء. تُقرأ القيمة من حيث يلتقي المؤشر بالمسار.
- على سطح بأعلى درجات الحاوية، كبطاقة مملوءة، يصعب رؤية المسار: فدرجته تكاد تكون نفسها. وحيث يقف المؤشر على سطح كهذا، وجِّه
comp.progress-indicator.track.colorإلى دور أقوى في طبقة. ويبقى ما يُظهره المؤشر مقروءًا من حيث يلتقي بالمسار. - إن كانت المهمة تعطّل منطقة من الصفحة، فعلِّم تلك المنطقة بأنها مشغولة ما دامت المهمة جارية (
aria-busyعلى الويب).