Progress プログレスバー

Progress - サンプル①

45% 
<div class="progress">
	<div class="progress-bar" style="width: 45%">
		45%
	</div>
</div>

Progress - サンプル②

Small
Default
Large 
<div class="progress small">
	<div class="progress-bar" style="width: 30%">
		Small
	</div>
</div>
<div class="progress">
	<div class="progress-bar" style="width: 60%">
		Default
	</div>
</div>
<div class="progress large">
	<div class="progress-bar" style="width: 90%">
		Large
	</div>
</div>

Progress - サンプル③

Pill Progress 
<div class="progress pill">
	<div class="progress-bar" style="width: 50%">
		Pill Progress
	</div>
</div>

Progress - サンプル④

Info
Success
Warning
Error 
<div class="progress">
	<div class="progress-bar is-info"    style="width: 20%">
		Info
	</div>
</div>
<div class="progress">
	<div class="progress-bar is-success" style="width: 40%">
		Success
	</div>
</div>
<div class="progress">
	<div class="progress-bar is-warning" style="width: 60%">
		Warning
	</div>
</div>
<div class="progress">
	<div class="progress-bar is-error"   style="width: 80%">
		Error
	</div>
</div>

Progress - サンプル⑤

Info
Success
Warning
Error