プログレス

How it works

Progressコンポーネントは、2つのHTML要素、幅を設定するためのCSS、およびいくつかの属性で構築されています。

the HTML5 progress element を使用しないため、プログレスバーを積み重ねてアニメーション化できます、その上にテキストラベルを配置します。

進行状況バーの最大値を示すラッパーとして Progress コンポーネントを使用します。

内部の ProgressBar コンポーネントを使用して、これまでの進捗状況を示します。

ProgressBar コンポーネントの幅を設定するには、インラインスタイル、ユーティリティクラス、またはカスタムCSSが必要です。

ProgressBar コンポーネントには、アクセス可能にするためにいくつかの role および aria 属性も必要です。

vue

<template>
 <Progress>
  <ProgressBar />
 </Progress>
 <Progress>
  <ProgressBar :value="25" />
 </Progress>
 <Progress>
  <ProgressBar :value="50" />
 </Progress>
 <Progress>
  <ProgressBar :value="75" />
 </Progress>
 <Progress>
  <ProgressBar :value="100" />
 </Progress>
</template>

Width

vue

<template>
 <Progress>
  <ProgressBar
   relative-width="75"
   :value="75"
  />
 </Progress>
</template>

Labels

ProgressBar コンポーネント内にテキストを配置して、プログレスバーにラベルを追加します。

25%

vue

<template>
 <Progress>
  <ProgressBar :value="25">
   25%
  </ProgressBar>
 </Progress>
</template>

Height

Progress コンポーネントには height 値のみを設定するため、その値を変更すると、内側の ProgressBar コンポーネントはそれに応じて自動的にサイズ変更されます。

vue

<template>
 <Progress style="height: 1px">
  <ProgressBar :value="25" />
 </Progress>
 <Progress style="height: 20px">
  <ProgressBar :value="25" />
 </Progress>
</template>

Backgrounds

バックグラウンドユーティリティクラスを使用して、個々のプログレスバーの外観を変更します。

vue

<template>
 <Progress>
  <ProgressBar
   background-color="success"
   :value="25"
  />
 </Progress>
 <Progress>
  <ProgressBar
   background-color="info"
   :value="50"
  />
 </Progress>
 <Progress>
  <ProgressBar
   background-color="warning"
   :value="75"
  />
 </Progress>
 <Progress>
  <ProgressBar
   background-color="danger"
   :value="100"
  />
 </Progress>
</template>

Multiple bars

コンポーネントに複数の進行状況バーを含め流ことができます。

vue

<template>
 <Progress>
  <ProgressBar :value="15" />
  <ProgressBar
   background-color="success"
   :value="30"
  />
  <ProgressBar
   background-color="info"
   :value="20"
  />
 </Progress>
</template>

Striped

プログレスバーの背景色の上にCSSグラデーションでストライプを適用するには、任意の ProgressBar コンポーネントに striped 属性を追加します。

vue

<template>
 <Progress>
  <ProgressBar
   striped
   :value="10"
  />
 </Progress>
 <Progress>
  <ProgressBar
   striped
   background-color="success"
   :value="25"
  />
 </Progress>
 <Progress>
  <ProgressBar
   striped
   background-color="info"
   :value="50"
  />
 </Progress>
 <Progress>
  <ProgressBar
   striped
   background-color="warning"
   :value="75"
  />
 </Progress>
 <Progress>
  <ProgressBar
   striped
   background-color="danger"
   :value="100"
  />
 </Progress>
</template>

Animated stripes

縞模様のグラデーションもアニメーション化できます。 CSS3 アニメーションでストライプを右から左にアニメーション化するには、 animated 属性を ProgressBar コンポーネントに追加します。

vue

<template>
 <Progress>
  <ProgressBar
   striped
   animated
   :value="75"
  />
 </Progress>
</template>

Bootstrap