CSS: progress ​

.instui-progress · stable — 一個具有有色量表、尺寸與可選值標籤的確定型進度條。

.value 與 .bar 為同級（皆為根節點的子項）——類似 progress-circle 如何在其內部嵌套自己的 .value 部分。InstUI 沒有不確定狀態；:indeterminate 是 pantoken 的推測實作（原生 <progress> 缺少 value 屬性），會將 .bar 動畫化為滑動區段並隱藏 .value，因為沒有可顯示的有意義數值。<meter> 沒有不確定狀態，因此不受影響。

Source: progress.css

無障礙 ​

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

使用方法 ​

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

範例 ​

Nested label ​

html
<label>
  Uploading Document: <progress class="instui-progress -color-brand" value="70">70%</progress>
</label>

External label ​

html
<label for="storage-used">Storage used</label>
<meter id="storage-used" class="instui-progress -color-warning" min="20" value="40" max="60">50%</meter>

結構 ​

// 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;

修飾器 ​

修飾器說明
.-color-brand品牌量表顏色。
.-color-danger危險量表顏色。
.-color-info資訊量表顏色。
.-color-inverse適用於深色背景。
.-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.
.-render-value-inside將 .value 呈現在軌道內並對齊於起始端，而非置於旁側；請為其設計樣式以確保在量表顏色上可讀性。
.-should-animateInteraction — Animate meter changes over half a second.
.-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超小。

部件 ​

部件說明
.bar已填充的量表條。
.value位於欄旁的數值文字。

偽元素 ​

偽元素說明
:::indeterminate自訂，非 InstUI 所有。僅適用於缺少 value 屬性的原生 <progress>；會將 .bar 動畫化為滑動區段並隱藏 .value。
::after將軌道的底部邊線繪製為覆蓋在量表之上的獨立圖層，讓整體邊框與底部邊框在各主題間保持獨立。

狀態 ​

狀態說明
:indeterminate—

自訂屬性 ​

屬性型別預設說明
--max<number>—最大進度值（預設 100）。
--min<number>—最小量表值（預設 0）。
--value<number>—目前的進度值。
--value-max<number>—@alias {@link --max} 最大進度值（預設 100）。
--value-now<number>—@alias --value 的別名。

動畫 ​

動畫說明
pantoken-progress-indeterminate—

已使用的代幣 ​

Token型別值
--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>#CF4A00
--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

瀏覽器支援 ​

  • 使用 @scope at-rule 對量表部分的規則加上作用域；不支援 @scope 的瀏覽器會忽略那些有作用域的規則。

相關 ​