フィードバック · 準拠済み
LinearProgress
LinearProgressLinearProgressProps
Linear progress
Determinate at a few fractions and self-animating indeterminate. See WavyProgress for the Material 3 Expressive traveling-wave treatment.
Determinate
Custom max
Indeterminate
import { LinearProgress, Surface, Text } from '@language-lit/material3-expressive'
export function LinearProgressExample() {
return (
<Surface
as="section"
aria-labelledby="linear-progress-example-title"
color="surface-container-low"
shape="extra-large"
className="linear-progress-example"
>
<Text as="h2" id="linear-progress-example-title" variant="titleLarge" emphasis="emphasized">
Linear progress
</Text>
<Text as="p" variant="bodyMedium">
Determinate at a few fractions and self-animating indeterminate. See
WavyProgress for the Material 3 Expressive traveling-wave treatment.
</Text>
<Text as="p" variant="labelLarge">Determinate</Text>
<LinearProgress aria-label="Download progress, empty" value={0} />
<LinearProgress aria-label="Download progress, low" value={0.05} />
<LinearProgress aria-label="Download progress, mid" value={0.45} />
<LinearProgress aria-label="Download progress, high" value={0.98} />
<LinearProgress aria-label="Download progress, complete" value={1} />
<Text as="p" variant="labelLarge">Custom max</Text>
<LinearProgress aria-label="Download progress, custom max" value={150} max={200} />
<Text as="p" variant="labelLarge">Indeterminate</Text>
<LinearProgress aria-label="Loading" />
</Surface>
)
}LinearProgressは横長の直線的な進捗バーを表示します。確定した進捗にはvalueを指定し、連続してアニメーションする不確定な進捗バーにはvalueを指定しません。これはネイティブの<progress>要素と同じ仕様です。
import { LinearProgress } from '@language-lit/material3-expressive'
import '@language-lit/material3-expressive/styles.css'
<LinearProgress aria-label="Download progress" value={0.4} />
<LinearProgress aria-label="Loading" />仕様
[0, max]の数値であるvalueを指定すると、正確なaria-valuenowを持つ確定進捗を表示します。valueを省略すると不確定モードになり、2本のバーが連続してアニメーションします。この場合、支援技術に処理中または不確定な状態を伝えるため、aria-valuenowは出力しません。maxの既定値は1です。aria-labelまたはaria-labelledbyで必須のアクセシブルネームを指定します。LinearProgress自体に表示ラベルはありません。inline-sizeの既定値は100%で、ネイティブの<progress>要素と同様に幅いっぱいに表示します。ルート要素またはラッパーに通常のCSSを指定して変更できます。- Material 3 Expressiveの波が移動する表現には
WavyProgressを使います。
トークンと境界
色、形状、モーションのタイミングはすべてMaterial3Providerがスコープする--m3e-comp-linear-progress-* CSSカスタムプロパティから取得します。LinearProgressは実行時スタイルを注入せず、requestAnimationFrameループも使いません。不確定状態の動きはCSSの@keyframesだけで実現します。また、Next.js、Vite、ルーター、アニメーションライブラリ、非公開のアプリケーションコードをインポートしません。