CSS: progress-circle ​

.instui-progress-circle · stable — --value および --value-max のカスタムプロパティで駆動される円形のプログレスリング。

リングは conic-gradient のドーナツを ::before 上に描画し、放射状グラデーションのマスクで切り抜かれます；アークは --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暗背景用（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-smSmall。
.-size-smallSmall。-size-sm の長い別名。
.-size-x-smallExtra small。-size-xs の長い別名。
.-size-xsExtra small。

パーツ ​

パート説明
.valueリングの穴の中央に配置される値テキスト。

疑似要素 ​

疑似要素説明
:::indeterminateカスタム（InstUI の一部ではない）。ネイティブの <progress> が value 属性を欠く場合にのみ適用されます；::before を一定のアークで回転させ、.value を非表示にします。
::beforeリング自体を描画します：円錐（conic）グラデーションのドーナツを放射状マスクで切り抜き、そのアークは --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）進捗の線形バー形式。