Progress Bar

Description

Progress bars represent the progress of some action. You can use a default progress bar or an indeterminate progress bar. Check the Examples page to find an example about this component.

Code Examples

These are some examples for component:

<!-- 50% --> 
<div class="tui-progress-bar">
    <span class="tui-progress" style="width: 50%"></span>
</div>

<!-- With background --> 
<div class="tui-progress-bar tui-bg-blue-black">
    <span class="tui-progress" style="width: 50%"></span>
</div>

<!-- Indeterminate --> 
<div class="tui-progress-bar">
    <span class="tui-indeterminate"></span>
</div>

<!-- Labeled --> 
<div class="tui-progress-bar">
    <span class="tui-progress-label">50%</span>
    <span class="tui-progress" style="width: 50%"></span>
</div>

<!-- Custom --> 
<div class="tui-progress-bar red-255">
    <span class="tui-progress green-255" style="width: 50%"></span>
</div>

Component Classes

This is the table with available classes for this component.

Class	Description
.tui-progress-bar	Creates the bar for progress
.tui-progress	Creates a progress. Control it with a percentage in the width property
.tui-indetermiante	Creates a indeterminate progress
.tui-progress-label	Creates a label centered in the progress bar