Progress

For loading, redirecting, or action status

Description

This widget presents a nicely-looking progress bar.

Note Please note that this widget is just the overall looks of the progress bar, you have to write behavior using it yourself.

Basic example of usage is this:

$this->widget(
    'booster.widgets.TbProgress',
    array(
        'context' => 'success', // 'success', 'info', 'warning', or 'danger'
        'percent' => 60,
    )
);

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Widget Configuration

Here's all configuration properties which you can set for TbProgress widget.

Property Description
string context = "" The "type" of the progress bar, that is, its color. See TYPE_* constants for valid values.
boolean striped = false Whether the progress bar should be striped diagonally.
boolean animated = false

Whether the progress bar should be animated.

Note Have effect only when striped is true.

Note Most possibly animations will not work in old versions of Internet Explorer.
integer percent = 0

What percent of progress bar should be filled.

Note Only left-to-right orientation is supported for now.
array htmlOptions = array() HTML attributes of the widget container element.
string content = "" What should be written inside the progress bar. By default nothing will be written.
array stacked = null

You can use this property to make "stacked" progress bar, that is, several progress bars inside common line. To do this, you have to make this property an array, each element of which is the array of configuration parameters for individual bars.

Note You can set only htmlOptions, content, percent and type properties for sub-bars.

Also You cannot make striped stacked progressbars... yet.

Examples of usage

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

$this->widget(
    'booster.widgets.TbProgress',
    array(
        'context' => 'danger', // 'info', 'success' or 'danger'
        'percent' => 40, // the progress
        'striped' => true,
    )
);

Animated

Set animated to true to animate the stripes right to left. Not available in all versions of IE.

$this->widget(
    'booster.widgets.TbProgress',
    array(
        'percent' => 40, // the progress
        'striped' => true,
        'animated' => true,
    )
);

Stacked

Place multiple bars into the same .progress to stack them.

$this->widget(
    'booster.widgets.TbProgress',
    array(
    	'striped' => true,
        'stacked' => array(
            array(
                'context' => 'success',
                'percent' => 30,
                'htmlOptions' => array(
                    'data-toggle' => 'tooltip',
                    'title' => 'Hey! I am a title here.'
                )
            ),
            array('context' => 'warning', 'percent' => 35),
            array('context' => 'danger', 'percent' => 30),
        )
    )
);