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(60,success,active)
#progress_bar(50,warning,latency)
#progress_bar{{
25
25,success
25,info,1/4
}}