Progress

Twitter bootstrap Documentation

How it works

Twitter bootstrap Documentation

Result

Source

<?php


// Display progressbar at 0%
echo $this->progressBar(0, 100);

// Display progress bar at 25%
echo $this->progressBar(0, 100, 25);

// Display progress bar at 50%
echo $this->progressBar(0, 100, 50);

// Display progress bar at 75%
echo $this->progressBar(0, 100, 75);

// Display progress bar at 100%
echo $this->progressBar(0, 100, 100);

Labels

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->progressBar([
    'show_label' => true,
    'min' => 0,
    'max' => 100,
    'current' => 25,
]);

Height

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->progressBar([
    'attributes' => ['style' => 'height:1px'],
    'min' => 0,
    'max' => 100,
    'current' => 25,
]);

echo $this->progressBar([
    'attributes' => ['style' => 'height:20px'],
    'min' => 0,
    'max' => 100,
    'current' => 25,
]);

Backgrounds

Twitter bootstrap Documentation

Result

Source

<?php

foreach (
    [
        'success' => 25,
        'info' => 50,
        'warning' => 75,
        'danger' => 100,
    ] as $variant => $current
) {
    echo $this->progressBar([
        'variant' => $variant,
        'min' => 0,
        'max' => 100,
        'current' => $current,
    ]);
}

Multiple bars

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->progressBarGroup([
    ['min' => 0, 'max' => 100, 'current' => 15],
    ['variant' => 'success', 'min' => 0, 'max' => 100, 'current' => 30],
    ['variant' => 'info', 'min' => 0, 'max' => 100, 'current' => 20],
]);

Striped

Twitter bootstrap Documentation

Result

Source

<?php

foreach (
    [
        null => 10,
        'success' => 25,
        'info' => 50,
        'warning' => 75,
        'danger' => 100,
    ] as $variant => $current
) {
    echo $this->progressBar([
        'striped' => true,
        'variant' => $variant,
        'current' => $current,
        'min' => 0,
        'max' => 100,
    ]);
}

Animated stripes

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->progressBar([
    'striped' => true,
    'animated' => true,
    'current' => 75,
    'min' => 0,
    'max' => 100,
]);