Progress
<div class="c-progress">
<div class="c-progress__bar" style="width:15%;"></div>
</div>
Rounded
<div class="c-progress c-progress--rounded">
<div class="c-progress__bar" style="width:15%;"></div>
</div>
Colors
<div class="c-progress">
<div class="c-progress__bar" style="width:5%;"></div>
</div><br>
<div class="c-progress">
<div class="c-progress__bar c-progress__bar--brand" style="width:15%;"></div>
</div><br>
<div class="c-progress">
<div class="c-progress__bar c-progress__bar--info" style="width:20%;"></div>
</div><br>
<div class="c-progress">
<div class="c-progress__bar c-progress__bar--warning" style="width:25%;"></div>
</div><br>
<div class="c-progress">
<div class="c-progress__bar c-progress__bar--success" style="width:45%;"></div>
</div><br>
<div class="c-progress">
<div class="c-progress__bar c-progress__bar--error" style="width:65%;"></div>
</div>
Sizes
<div class="c-progress u-xsmall">
<div class="c-progress__bar" style="width:5%;"></div>
</div><br>
<div class="c-progress u-small">
<div class="c-progress__bar c-progress__bar--brand" style="width:15%;"></div>
</div><br>
<div class="c-progress u-medium">
<div class="c-progress__bar c-progress__bar--info" style="width:20%;"></div>
</div><br>
<div class="c-progress u-large">
<div class="c-progress__bar c-progress__bar--warning" style="width:25%;"></div>
</div><br>
<div class="c-progress u-xlarge">
<div class="c-progress__bar c-progress__bar--success" style="width:45%;"></div>
</div><br>
<div class="c-progress u-super">
<div class="c-progress__bar c-progress__bar--error" style="width:65%;"></div>
</div>
Text
<div class="c-progress u-xsmall">
<div class="c-progress__bar" style="width:5%;">5%</div>
</div><br>
<div class="c-progress u-small">
<div class="c-progress__bar c-progress__bar--brand" style="width:15%;">15%</div>
</div><br>
<div class="c-progress u-medium">
<div class="c-progress__bar c-progress__bar--info" style="width:20%;">20%</div>
</div><br>
<div class="c-progress u-large">
<div class="c-progress__bar c-progress__bar--warning" style="width:25%;">25%</div>
</div><br>
<div class="c-progress u-xlarge">
<div class="c-progress__bar c-progress__bar--success" style="width:45%;">45%</div>
</div><br>
<div class="c-progress u-super">
<div class="c-progress__bar c-progress__bar--error" style="width:65%;">65%</div>
</div>
Stacked
<div class="c-progress">
<div class="c-progress__bar" style="width: 15%;">15%</div>
<div class="c-progress__bar c-progress__bar--brand" style="width: 25%;">25%</div>
<div class="c-progress__bar c-progress__bar--info" style="width: 10%;">10%</div>
<div class="c-progress__bar c-progress__bar--warning" style="width: 12%;">12%</div>
<div class="c-progress__bar c-progress__bar--success" style="width: 18%;">18%</div>
<div class="c-progress__bar c-progress__bar--error" style="width: 6%;">6%</div>
</div>
<blaze-progress size="xsmall" percentage="10" rounded>10%</blaze-progress><br />
<blaze-progress size="small" type="brand" percentage="15">15%</blaze-progress><br />
<blaze-progress size="medium" type="info" percentage="20" rounded>20%</blaze-progress><br />
<blaze-progress size="large" type="success" percentage="25">25%</blaze-progress><br />
<blaze-progress size="xlarge" type="warning" percentage="30" rounded>30%</blaze-progress><br />
<blaze-progress size="super" type="error" percentage="35">35%</blaze-progress>
Attributes
Attribute | Description |
---|---|
type | The color of the bar |
rounded (boolean) | Toggle the rounded borders |
percentage | The amount of "progress" |
size | The size of the bar |