CSS: progress-circle ​

.instui-progress-circle · stable — טבעת התקדמות מעגלית המונעת על‑ידי התכונות המותאמות --value ו‑--value-max.

הטבעת היא בצורת понדון של conic-gradient צבועה על ::before ומוגבלת במסכת gradient רדיאלית; --value מחולק ב‑--value-max ומניע את הקשת. הוסף -should-animate וטען את נקודת הכניסה של האינטראקציות כדי להנפיש אותה מאפס כאשר היא מותקנת. ל‑InstUI אין מצב בלתי‑מוגדר; :indeterminate הוא הערכה הטובה ביותר רק ב‑pantoken (native <progress> ללא תכונת value), מסובב את הטבעת בקשת קבועה ומסתיר את .value כי אין מספר משמעותי להציג. ל‑<meter> אין מצב בלתי‑מוגדר, כך שאין לו השפעה.

Source: progress-circle.css

TIP

הרחבת JS — ה‑CSS של הרכיב הזה מצייר ופועל בעצמו; צמדו אותו עם @pantoken/interactions להוסיף את ההתנהגות האינטראקטיבית. המודיפייר -should-animate שלו מונחה על‑ידי אותה התנהגות. ראו את טבלת המודיפיירים למטה.

נגישות ​

השתמשו ב‑native <progress> לטווח השלמת משימות שמתחיל מאפס וב‑<meter> כאשר המינימום אינו אפס. העניקו לכל אלמנט שם נגיש על‑ידי הטמעתו ב‑<label> או קישור <label> נפרד באמצעות התאמת ערכי for ו‑id.

שימוש ​

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

דוגמאות ​

Nested label ​

html
<label>
  העלאת מסמך: <progress class="instui-progress-circle -size-sm" value="70">70%</progress>
</label>

External label ​

html
<label for="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. חל רק על native <progress> שחסר את התכונה value; מסובב את ::before בקשת קבועה ומסתיר את .value.
::beforeמצייר את הטבעת עצמה: понדון conic‑gradient החתוך במסכת רדיאלית, שהקשת שלו עוקבת אחרי תכונת ה‑--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>LightDarklight-dark(#F0C16C, #8C6400)
--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; במקומות שבהם מעברי custom‑property אינם נתמכים, הטבעת עדיין תצטייר אך לא תונפש.

קשור ​

  • progress — הצורה הקווית של אותו פרוגרס דטרמיניסטי.