CSS: progress-circle ​

.instui-progress-circle · stable — 由 --value 與 --value-max 自訂屬性驅動的圓形進度環。

此環是一個繪製在 ::before 上並以放射狀漸層遮罩裁切的 conic-gradient 甜甜圈；由 --value 除以 --value-max 決定弧度。加入 -should-animate 並載入互動入口以在掛載時從零開始動畫。InstUI 無不確定（indeterminate）狀態；:indeterminate 是 pantoken 的最佳猜測（原生 <progress> 沒有 value 屬性），以固定弧度旋轉環並隱藏 .value，因為沒有可顯示的實際數值。<meter> 沒有不確定狀態，因此不受影響。

Source: progress-circle.css

TIP

JS 加強 — 此元件的 CSS 可獨立渲染與運作；搭配 @pantoken/interactions 可加入互動行為。其 -should-animate 修飾符由該行為驅動。參見 下面的修飾符表。

無障礙 ​

在最小值為零時使用原生 <progress> 作為以零為基準的任務完成範圍；當最小值非零時使用 <meter>。可將任一元素置於 <label> 內或透過相符的 for 與 id 值關聯獨立的 <label>，以提供可及的名稱。

使用方法 ​

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 的一部分。僅適用於缺少 value 屬性的原生 <progress>；以固定弧度旋轉 ::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>#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 — 相同確定（determinate）進度的線性條形式。