CSS: progress-circle ​

.instui-progress-circle · stable — 由 --value 和 --value-max 自定义属性驱动的环形进度环。

该环是绘制在 ::before 上的 conic-gradient 甜甜圈，并用径向渐变掩码裁剪；由 --value 除以 --value-max 驱动弧线。添加 -should-animate 并加载交互入口点以在挂载时从零开始对其进行动画。InstUI 没有不确定状态；:indeterminate 是 pantoken 的最佳猜测（原生 <progress>，但没有 value 属性），以固定弧旋转该环并隐藏 .value，因为没有有意义的数字可显示。<meter> 没有不确定状态，因此不受影响。

Source: progress-circle.css

TIP

JS 增强 — 该组件的 CSS 可独立渲染和工作；将其与 @pantoken/interactions 配对以添加交互行为。其 -should-animate 修饰符由该行为驱动。参见下方的 modifier table。

无障碍 ​

对于以零为基的任务完成范围，请使用原生 <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-largeLarge。-size-lg 的长形式别名。
.-size-lgLarge。
.-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绘制环本身：一个用径向掩码裁剪的锥形渐变甜甜圈，其弧线跟踪 --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 — 相同确定性进度的线性条形形式。