CSS: progress ​

.instui-progress · stable — カラー付きメーター、サイズ、任意の値ラベルを持つ決定型プログレスバー。

.value は .bar の兄弟要素で、どちらもルートの子要素です — これは progress-circle が自身の .value 部分をネストする仕組みを反映しています。InstUI には不確定（indeterminate）状態はありません；: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暗背景用（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-smSmall。
.-size-smallSmall。-size-sm の長い別名。
.-size-x-smallExtra small。-size-xs の長い別名。
.-size-xsExtra small。

パーツ ​

パート説明
.bar塗りつぶされたメーターバー。
.valueバーの横に表示される値のテキスト。

疑似要素 ​

疑似要素説明
:::indeterminateカスタムで、InstUI の一部ではありません。ネイティブの <progress> が value 属性を欠く場合にのみ適用されます；.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 をサポートしないブラウザはそのスコープされたルールを無視します。

関連項目 ​

  • progress-circle — 同じ決定型プログレスの円形バージョン。