Loader

読み込み中や操作中など何らかの操作が仕掛り中であることを伝えるためのコンポーネントです。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

使用上の注意

ローディングアイコンと背景のコントラスト比を確保する

青いPrimary、白いLightのいずれも場合でも、背景色とのコントラスト比を保つよう注意してください。

ウェブアクセシビリティ簡易チェックリストに基づき、3:1以上のコントラスト比になるように調整してください。

読み込みが1秒未満で終わる場合は使用しない

読み込み時間1秒未満の場合は、画面のチラつきが生まれて体験を損なうので使用しないようにしてください。

Props

size
"s""m"

ローダーの大きさ

alt
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

代替テキスト

text
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

表示するメッセージ

type
"primary""light"

コンポーネントの色調

deferDisplay
falsetrue

表示を遅延させるかどうか