CSS: progress ​

.instui-progress · stable — شريط تقدم محدد مع مقياس ملون، أحجام، ووسم قيمة اختياري.

.value هو شقيق .bar، كلاهما طفلان للجذر — معاكسةً لكيفية احتواء progress-circle لجزء .value الخاص به. InstUI ليس له حالة غير محددة؛ :indeterminate هو تخمين خاص بـ pantoken (الـ <progress> المحلي بدون سمة value)، يقوم بتحريك .bar كقسم منزلق ويخفي .value لأنه لا يوجد رقم ذي معنى للعرض. <meter> ليس له حالة غير محددة، لذا فهو غير متأثر.

Source: progress.css

Accessibility ​

استخدم <progress> الأصلي للنطاق الصفري لإكمال المهام و<meter> عندما لا يكون الحد الأدنى صفرًا. امنح أيًا من العنصرين اسمًا قابلاً للوصول عن طريق وضعه داخل <label> أو ربط <label> منفصل من خلال مطابقة قيم for وid.

Usage ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/progress.css";

Examples ​

Nested label ​

html
<label>
  جارٍ تحميل المستند: <progress class="instui-progress -color-brand" value="70">70%</progress>
</label>

External label ​

html
<label for="storage-used">المساحة المستخدمة</label>
<meter id="storage-used" class="instui-progress -color-warning" min="20" value="40" max="60">50%</meter>

Structure ​

// Variant: nested-label

text
label
  .instui-progress
    .bar
    .value

// Variant: external-label

text
label
.instui-progress
  .bar
  .value
flowchart TD subgraph sg0 ["nested-label"] n1["label"]:::cssdoc-root n2(".instui-progress"):::cssdoc-part n3(".bar"):::cssdoc-part n4(".value"):::cssdoc-part end subgraph sg5 ["external-label"] n6["label"]:::cssdoc-root n7[".instui-progress"]:::cssdoc-root n8(".bar"):::cssdoc-part n9(".value"):::cssdoc-part end n2 --> n3 n2 --> n4 n1 --> n2 n7 --> n8 n7 --> n9 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modifiers ​

ModifierDescription
.-color-brandلون مقياس العلامة التجارية.
.-color-dangerلون مقياس الخطر.
.-color-infoلون مقياس المعلومات.
.-color-inverseمناسب للخلفيات الداكنة.
.-color-primary-inverseلون المقياس على خلفية داكنة (العكسي الأساسي).
.-color-successلون مقياس النجاح.
.-color-warningلون مقياس التحذير.
.-meter-color-alertDeprecated — use .-color-warning.
.-meter-color-brandDeprecated — use .-color-brand.
.-meter-color-dangerDeprecated — use .-color-danger.
.-meter-color-infoDeprecated — use .-color-info.
.-meter-color-successDeprecated — use .-color-success.
.-meter-color-warningDeprecated — use .-color-warning.
.-render-value-insideيعرض .value داخل المسار، محاذياً لبدايته، بدلاً من جانبه؛ قم بتنسيقه لقراءة واضحة فوق لون المقياس.
.-should-animateInteraction — Animate meter changes over half a second.
.-size-largeاسم مرادف مطوّل لـ -size-md.
.-size-lgكبير.
.-size-mdمتوسط (الافتراضي).
.-size-mediumمتوسط (الافتراضي). اسم طويل الشكل المقابل لـ -size-md.
.-size-smصغير.
.-size-smallاسم مرادف مطوّل لـ -size-sm.
.-size-x-smallصغير جدًا. اسم مستعار طويل لـ -size-xs.
.-size-xsصغير جدًا.

Parts ​

PartDescription
.barشريط المقياس الممتلئ.
.valueنص القيمة بجانب الشريط.

Pseudo-elements ​

Pseudo-elementDescription
:::indeterminateمخصص، ليس جزءًا من InstUI. ينطبق فقط على <progress> المحلي الذي يفتقد سمة value؛ يقوم بتحريك .bar كقسم منزلق ويخفي .value.
::afterيرسم قاعدة الجزء السفلي للمسار كطبقة مستقلة فوق المقياس، بحيث يبقى الحدود الكاملة والحافة السفلية مستقلة عبر الثيمات.

States ​

StateDescription
:indeterminate—

Custom properties ​

PropertyTypeDefaultDescription
--max<number>—أقصى قيمة تقدم (الافتراضي 100).
--min<number>—أدنى قيمة للمقياس (الافتراضي 0).
--value<number>—قيمة التقدم الحالية.
--value-max<number>—@alias {@link --max} أقصى قيمة للتقدم (الافتراضي 100).
--value-now<number>—@alias اسم مستعار لـ --value.

Animations ​

AnimationDescription
pantoken-progress-indeterminate—

Tokens consumed ​

TokenTypeValue
--instui-color-background-brand<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-error<color>#E62429
--instui-color-background-info<color>#2B7ABC
--instui-color-background-success<color>#03893D
--instui-color-background-warning<color>LightDarklight-dark(#F0C16C, #8C6400)
--instui-component-progress-bar-border-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-progress-bar-border-color-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-bar-border-radius<length>0.5rem
--instui-component-progress-bar-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-progress-bar-font-weight<integer>400
--instui-component-progress-bar-large-height<length>2rem
--instui-component-progress-bar-line-height<percentage>125%
--instui-component-progress-bar-medium-height<length>1.5rem
--instui-component-progress-bar-medium-value-font-size<length>1rem
--instui-component-progress-bar-meter-color-brand-inverse<color>LightDarklight-dark(#ffffff, #10141A)
--instui-component-progress-bar-small-height<length>1rem
--instui-component-progress-bar-text-color<color>LightDarklight-dark(#576773, #AAB0B5)
--instui-component-progress-bar-text-color-inverse<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-progress-bar-track-bottom-border-color<color>#00000000
--instui-component-progress-bar-track-bottom-border-color-inverse<color>#00000000
--instui-component-progress-bar-track-bottom-border-width<length>0.0625rem
--instui-component-progress-bar-track-color<color>#00000000
--instui-component-progress-bar-track-color-inverse<color>#00000000
--instui-component-progress-bar-value-padding<length>0.5rem
--instui-component-progress-bar-x-small-height<length>0.5rem

Browser support ​

  • يُقيد قواعد جزء المقياس باستخدام قاعدة @scope؛ المتصفحات التي لا تدعم @scope تتجاهل تلك القواعد المقيدة.
  • progress-circle — الشكل الدائري لنفس شريط التقدم المحدد.