Progress 進捗 · kf-progress
割合を 1 本の棒で見せる。数字を必ず添える。
進捗41%
完了した100%
上限を超えた112%
HTML
<div class="kf-progress"><div class="t"><span>進捗</span><b>41%</b></div><div class="bar"><i style="width:41%"></i></div></div>
<div class="kf-progress is-done"><div class="t"><span>完了した</span><b>100%</b></div><div class="bar"><i style="width:100%"></i></div></div>
<div class="kf-progress is-over"><div class="t"><span>上限を超えた</span><b>112%</b></div><div class="bar"><i style="width:100%"></i></div></div>kf-progressにt(左に項目名、右にbで数字)とbar(中のiの width が割合)。- 塗りは
accent。終わったらis-done(ok-ink)、上限を超えたらis-over(danger-ink)。棒は 100% で止め、数字で超過を示す。 - 高さ 6px、角 3px。地は
surface-sunken。 - 終わりが分からない処理には使わない(Notice の info で「読み込んでいます」と書く)。
- 棒だけで比べさせない。並べるなら数字を揃えて右に置く。