Get started

Font

CSS Components

CSS Elements

Get started

Font

CSS Components

CSS Elements

Doc

Progress bar

The progress bars indicate to the user that an action is in progress. minstyle.io offers several styles and colors :

Colors of a progress bar

20%
30%
40%
50%
60%
70%
<div class="ms-progress">
	<div class="ms-progress-fill" style="width: 20%;">20%</div>
</div>

<div class="ms-progress">
	<div class="ms-progress-fill ms-blue" style="width: 30%;">30%</div>
</div>

<div class="ms-progress">
	<div class="ms-progress-fill ms-green" style="width: 40%;">40%</div>
</div>

<div class="ms-progress">
	<div class="ms-progress-fill ms-red" style="width: 50%;">50%</div>
</div>

<div class="ms-progress">
	<div class="ms-progress-fill ms-yellow" style="width: 60%;">60%</div>
</div>

<div class="ms-progress">
	<div class="ms-progress-fill ms-gradient" style="width: 70%;">70%</div>
</div>

Striped progress bar

65%
35%
<div class="ms-progress">
	<div class="ms-progress-fill ms-blue" style="width: 65%;">65%</div>
	<div class="ms-progress-fill ms-green" style="width: 35%;">35%</div>
</div>

Loading...
<div class="ms-progress">
	<div class="ms-progress-fill ms-green ms-rounded ms-striped" style="width: 67%;">Loading...</div>
</div>

Progress bar sizes

Small
Large
<div class="ms-progress ms-small">
	<div class="ms-progress-fill ms-yellow" style="width: 23%;">Small</div>
</div>

<div class="ms-progress ms-large">
	<div class="ms-progress-fill ms-yellow" style="width: 23%;">Large</div>
</div>

Progress progress bar

Rounded
<div class="ms-progress ms-rounded">
	<div class="ms-progress-fill ms-red ms-rounded" style="width: 50%;">Rounded</div>
</div>