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-largeLarge。-size-lg 的长形式别名。
.-size-lgLarge。
.-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 的浏览器会忽略这些作用域规则。

相关 ​