Progress Bars

Default Progress Bar

<div class="progress progress-m">
    <div class="progress-bar"></div>
</div>

Sizes

Extra Small

<div class="progress progress-xs">
	<div class="progress-bar" style="width: 35%;"></div>
</div>

Small

<div class="progress progress-s">
	<div class="progress-bar" style="width: 35%;"></div>
</div>

Medium

<div class="progress progress-m">
	<div class="progress-bar" style="width: 35%;"></div>
</div>

Large

<div class="progress progress-l">
	<div class="progress-bar" style="width: 35%;"></div>
</div>

Extra Large

<div class="progress progress-xl">
	<div class="progress-bar" style="width: 35%;"></div>
</div>

Progress bar size examples

Styles

Primary

<div class="progress progress-primary progress-m">
	<div class="progress-bar" style="width: 35%;"></div>
</div>

Accent

<div class="progress progress-accent progress-m">
	<div class="progress-bar" style="width: 35%;"></div>
</div>

Information

<div class="progress progress-info progress-m">
	<div class="progress-bar" style="width: 35%;"></div>
</div>

Success

<div class="progress progress-success progress-m">
	<div class="progress-bar" style="width: 35%;"></div>
</div>

Warning

<div class="progress progress-warning progress-m">
	<div class="progress-bar" style="width: 35%;"></div>
</div>

Error

<div class="progress progress-error progress-m">
	<div class="progress-bar" style="width: 35%;"></div>
</div>

Progress bar color examples