Progress Bars

Progress bars have been proven to drive users to complete processes such as multi-step forms. The progress bar component comes in 3 variations as normal, striped, and animated. You can override the styles to create different color options.

Example Usage:

Code Example:

    
        <div class="progress-bar">
            <span class="progress-bar-green" style="width: 20%;"></span>
        </div>
        <div class="progress-bar striped">
            <span class="progress-bar-blue" style="width: 40%;"></span>
        </div>
        <div class="progress-bar striped animated">
            <span class="progress-bar-red" style="width: 60%;"></span>
        </div>
    
Up Next: »