progress_bar プログレスバー

プログレスバーを表示します。

使い方1

//80%の進捗状況を表現します
#progress_bar(80)

//色やスタイルを変更します
//色タイプやオプションは下記表を参照してください
#progress_bar(50,色タイプ,オプション)

//ラベルを表示します
#progress_bar(100,完了!)

使い方2(スタック)

//複数のバーを重ねることができます
//各行パーセンテージ,色タイプ,ラベル、の順に指定します
#progress_bar(*オプション*){{
25
25,success
25,info,1/4
}}

色タイプ

名前説明
primary青いバーを表示します
info水色のバーを表示します
success緑色のバーを表示します
warning黄色のバーを表示します
danger赤色のバーを表示します

オプション

オプション説明
stripe斜線の入ったバーを表示します
activeバーをアニメーションさせます
latencyバーの塗りつぶしを遅延させます。

サンプル

#progress_bar(100,info,水色)
水色
#progress_bar(80,stripe)
80%
#progress_bar(60,success,active)
60%
#progress_bar(50,warning,latency)
50%
#progress_bar(40,danger)
40%
#progress_bar{{
25
25,success
25,info,1/4
}}
25%
25%
1/4