Content Progress
BasMaterial UI logo

© BasMaterial UI - v0.2.8

Notifications
View All

Progress

Use our custom progress component for displaying simple or complex progress bars.

Normal


<div class="bas-ui-progress">
    <div class="bas-ui-determinate" style="width: 50%;"></div>
</div>

Custom color


<div class="bas-ui-progress grey-500">
    <div class="bas-ui-determinate blue-500" style="width: 40%;"></div>
</div>
<div class="bas-ui-progress grey-500">
    <div class="bas-ui-determinate purple-500" style="width: 60%;"></div>
</div>
<div class="bas-ui-progress grey-500">
    <div class="bas-ui-determinate deep-orange-500" style="width: 80%;"></div>
</div>

Height & Label

50%

<div class="bas-ui-progress" style="line-height: 8px;">
    <div class="bas-ui-determinate" style="width: 50%; height: 8px;"></div>
</div>
<div class="bas-ui-progress" style="line-height: 16px;">
    <div class="bas-ui-determinate" style="width: 50%; height: 16px;">50%</div>
</div>

Multiple bars


<div class="bas-ui-progress grey-500">
    <div class="bas-ui-determinate blue-500" style="width: 15%;"></div>
    <div class="bas-ui-determinate purple-500" style="width: 30%;"></div>
    <div class="bas-ui-determinate deep-orange-500" style="width: 20%;"></div>
</div>