CSS: progress-circle ​

.instui-progress-circle · stable — حلقة تقدم دائرية يقودها --value و--value-max خصائص مخصصة.

الحلقة عبارة عن دونات conic-gradient مرسومة على ::before ومقصوصة بقناع تدرج شعاعي؛ القوس يحركه --value مقسومًا على --value-max. أضف -should-animate وحمّل نقطة إدخال التفاعلات لتحريكه من الصفر عند التركيب. InstUI لا تحتوي على حالة غير محددة؛ :indeterminate تخمين مخصّص لـ pantoken فقط (<progress> أصلي بدون سمة value)، يدير الحلقة عند قوس ثابت ويخفي .value لأنه لا يوجد رقم ذو معنى للعرض. <meter> ليس له حالة غير محددة، لذا فهو غير متأثر.

Source: progress-circle.css

TIP

تحسين JS — تقوم CSS الخاصة بهذا المكوّن بالعرض والعمل بمفردها؛ زوجها مع @pantoken/interactions لإضافة السلوك التفاعلي. المُعدِّل -should-animate يُدار بواسطة ذلك السلوك. راجع جدول المُعدِّلات أدناه.

سهولة الوصول ​

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

الاستخدام ​

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

أمثلة ​

Nested label ​

html
<label>
  Uploading Document: <progress class="instui-progress-circle -size-sm" value="70">70%</progress>
</label>

External label ​

html
<label for="score">Score</label>
<meter id="score" class="instui-progress-circle -color-success" min="20" value="40" max="60">50%</meter>

الهيكل ​

// Variant: nested-label

text
label
  .instui-progress-circle
    .value

// Variant: external-label

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

المعدّلات ​

معدّلالوصف
.-color-brandلون مقياس العلامة التجارية.
.-color-dangerلون مقياس الخطر.
.-color-infoلون مقياس المعلومات.
.-color-primary-inverseلون المقياس على خلفية داكنة (العكسي الأساسي).
.-color-successلون مقياس النجاح.
.-color-warningلون مقياس التحذير.
.-meter-color-alertمهجور — use .-color-warning.
.-meter-color-brandمهجور — use .-color-brand.
.-meter-color-dangerمهجور — use .-color-danger.
.-meter-color-infoمهجور — use .-color-info.
.-meter-color-successمهجور — use .-color-success.
.-meter-color-warningمهجور — use .-color-warning.
.-shold-animate-on-mountAlias — maps to .-should-animate.
.-should-animateInteraction — Animate the meter, ring, and centered value into place on mount.
.-should-animate-on-mountAlias — maps to .-should-animate.
.-size-largeكبير. اسم مستعار طويل لـ -size-lg.
.-size-lgكبير.
.-size-mdمتوسط (الافتراضي).
.-size-mediumمتوسط (الافتراضي). اسم طويل الشكل المقابل لـ -size-md.
.-size-smصغير.
.-size-smallصغير. اسم مستعار طويل لـ -size-sm.
.-size-x-smallصغير جدًا. اسم مستعار طويل لـ -size-xs.
.-size-xsصغير جدًا.

الأجزاء ​

جزءالوصف
.valueنص القيمة المركزي في ثقب الدونات.

عناصر زائفة ​

عنصر زائفالوصف
:::indeterminateمخصص، ليس جزءًا من InstUI. ينطبق فقط على <progress> أصلي يفتقد سمة value; يدير ::before عند قوس ثابت ويخفي .value.
::beforeيرسم الحلقة نفسها: دونات بتدرج مخروطي مقصوص بقناع دائري، يقيس قوسه بحسب خاصية --value المخصصة.

الحالات ​

حالةالوصف
:indeterminate—

خصائص مخصّصة ​

خاصيةنوعافتراضيالوصف
--animation-delay<number>—الوقت بالملليثانية للانتظار قبل بدء رسوم تركيب الحركة (الافتراضي 0).
--max<number>—أقصى قيمة تقدم (الافتراضي 100).
--min<number>—أدنى قيمة للمقياس (الافتراضي 0).
--pantoken-pc-fill<color>—لون القوس المملوء (المقياس)؛ تُعيّنه مُعدِّلات -color-*.
--pantoken-pc-stroke<length>—عرض السكتة للحلقة؛ تحدده مُعدِّلات -size-*.
--pantoken-pc-track<color>—لون المسار غير المملوء.
--value<number>—قيمة التقدم الحالية؛ مسجلة باستخدام @property حتى يمكنها الانتقال.
--value-max<number>—@alias {@link --max} أقصى قيمة للتقدم (الافتراضي 100).
--value-now<number>—@alias اسم مستعار لـ --value.

التحريكات ​

تحريكالوصف
pantoken-progress-circle-indeterminate—

الرموز المستهلكة ​

Tokenنوعقيمة
--instui-component-progress-circle-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-progress-circle-color-inverse<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-progress-circle-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-progress-circle-font-weight<integer>600
--instui-component-progress-circle-large-size<length>9em
--instui-component-progress-circle-large-stroke-width<length>0.875em
--instui-component-progress-circle-line-height<percentage>125%
--instui-component-progress-circle-medium-size<length>7em
--instui-component-progress-circle-medium-stroke-width<length>0.625em
--instui-component-progress-circle-meter-color-brand<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-progress-circle-meter-color-brand-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-danger<color>#E62429
--instui-component-progress-circle-meter-color-danger-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-info<color>#2B7ABC
--instui-component-progress-circle-meter-color-info-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-success<color>#03893D
--instui-component-progress-circle-meter-color-success-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-warning<color>#CF4A00
--instui-component-progress-circle-meter-color-warning-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-small-size<length>5em
--instui-component-progress-circle-small-stroke-width<length>0.5em
--instui-component-progress-circle-track-color<color>LightDarklight-dark(#ffffff, #10141A)
--instui-component-progress-circle-track-color-inverse<color>#00000000
--instui-component-progress-circle-x-small-size<length>3em
--instui-component-progress-circle-x-small-stroke-width<length>0.2em

دعم المتصفّح ​

  • يسجّل خصائص التقدم الرقمية مع @property ويرسم باستخدام CSS mask وconic-gradient; حيثما لا تدعم الانتقالات لخصائص مخصصة، تظل الحلقة مرسومة لكن لن تتأنق.

ذات صلة ​

  • progress — الشكل الخطي الشريطي لنفس التقدم المحدد.