<div class="progress">
    <div class="progress-bar bg-pink" style="width:70%"></div>
</div>

<div class="progress">
    <div class="progress-bar bg-pink progress-bar-striped" style="width:70%"></div>
</div>

<div class="progress">
    <div class="progress-bar bg-pink progress-bar-striped progress-bar-animated" style="width:70%"></div>
</div>

<div class="progress" style="height:20px;">
    <div class="progress-bar bg-pink progress-bar-striped progress-bar-animated" style="width:70%; height:20px;"></div>
</div>

<div class="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>

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

<div class="progress">
    <div class="progress-bar m-rainbow">
        <div class="m-bar bg-red"></div>
        <div class="m-bar bg-green"></div>
        <div class="m-bar bg-yellow"></div>
        <div class="m-bar bg-blue"></div>
    </div>
</div>
                        

<script>
    $('.m-rainbow').rainbow();
</script>