プログレス

プログレスには、線形プログレスと円形プログレスがあります。

使用方法

線形プログレスは純粋な CSS で記述されており、HTML を書くだけで有効になります。

円形プログレスはページの読み込み完了後に自動的に初期化されます。動的に生成される円形プログレスの場合は、初期化のために mdui.mutation() を呼び出す必要があります。

カラー

線形プログレスはプライマリーカラーを使用します。

円形プログレスはプライマリーカラーまたはマルチカラーを使用します。

線形プログレス

不確定プログレス

正確な進捗値が不明な場合に使用されます。

例

<div class="mdui-progress">
  <div class="mdui-progress-indeterminate"></div>
</div>

確定プログレス

正確な進捗値が既知の場合に使用されます。

<div class="mdui-progress-determinate"></div> 要素の width 属性値を変更することで、進捗を更新できます。

例

<div class="mdui-progress">
  <div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>

円形プログレス

要素 <div class="mdui-spinner"></div> を追加するだけで円形プログレスが生成されます。クラス .mdui-spinner-colorful を追加すると、マルチカラーの円形プログレスが生成されます。

.mdui-spinner クラスの width と height スタイル値を変更して円形プログレスのサイズを変更できますが、width と height の値が等しいことを確認する必要があります。

単色

例

<div class="mdui-spinner"></div>

マルチカラー

例

<div class="mdui-spinner mdui-spinner-colorful"></div>

動的に生成される円形プログレス

円形プログレスコンポーネントを動的に生成する場合は、初期化のために mdui.mutation() を呼び出す必要があります。

既存の円形プログレスコンポーネントを変更する必要がある場合は、mdui.updateSpinners() メソッドを呼び出してコンポーネントを再初期化する必要があります。このメソッドは、CSS セレクター（.mdui-spinner クラス名を含む必要があります）、DOM 要素、または DOM 要素の配列を引数として受け取り、指定された円形プログレスのみを再初期化します。引数を渡さない場合は、ページ内のすべての円形プログレスが再初期化されます。

CSS クラス一覧

クラス名	説明
`.mdui-progress`	線形プログレスを定義します。
`.mdui-progress-indeterminate`	不確定な進捗の線形プログレス。
`.mdui-progress-determinate`	確定した進捗の線形プログレス。
`.mdui-spinner`	円形プログレスを定義します。
`.mdui-spinner-colorful`	マルチカラーの円形プログレス。

メニュー

折りたたみ