Progress Bars

View Code
<div class="progress ms-progress">
    <div class="progress-bar bg-pink" style="width:70%"></div>
</div>
View Code
<div class="progress ms-progress">
    <div class="progress-bar bg-pink progress-bar-striped" style="width:70%"></div>
</div>
View Code
<div class="progress ms-progress">
    <div class="progress-bar bg-pink progress-bar-striped progress-bar-animated" style="width:70%"></div>
</div>
View Code
<div class="progress ms-progress" style="height:20px;">
    <div class="progress-bar bg-pink progress-bar-striped progress-bar-animated" style="width:70%; height:20px;"></div>
</div>
Free Space
Warning
Danger
View Code
<div class="progress ms-progress" style="height: 20px;">
    <div class="progress-bar bg-success" style="width:40%; height: 20px;">
        Free Space
    </div>
    <div class="progress-bar bg-warning" style="width:10%; height: 20px;">
        Warning
    </div>
    <div class="progress-bar bg-danger" style="width:20%; height: 20px;">
        Danger
    </div>
</div>

Indeterminate Progress Bars

View Code
<div class="progress ms-progress">
    <div class="progress-bar bg-pink indeterminate"></div>
</div>
View Code
<div class="ms-progress indeterminate-rainbow"></div>

Spinners

View Code
<div class="ms-spinner"></div>
View Code
<div class="ms-spinner spinner-blue"></div>