Progress Bar

Static Progress Bar

Some basic options, it's simple server generated progress bar. Width of progress bar is based upon percent value. Value maxVal does not really matter here as percent takes takes precedence here. Default type is used here, second one has type of success.

echo ProgressBar::widget([
	'percent' => 20,
    'content' => 'TEST',
]);
echo ProgressBar::widget([
	'type' => ProgressBar::TypeSuccess,
	'percent' => 33
]);

Width can be automatically calculated if progress bar will be used with value and maxVal. Info type is used here.

echo ProgressBar::widget([
	'type' => ProgressBar::TypeInfo,
	'maxVal' => 30,
	'minVal' => 10,
	'value' => 15
]);

Automatic type

Additionally, automatic progress bar type can be set, based on value. It might change from success, to warning finishing at danger. To enable automatic type change, set type to ProgressBar::TypeAuto.

To set custom step values, the array containing keys same as type names can be used, with values containing percent at which type should be applied. The field to configure auto steps, is - you guessed it - autoSteps

Example steps configuration:

    $autoSteps = [
		ProgressBar::TypeSuccess => 0,
		ProgressBar::TypeWarning => 75,
		ProgressBar::TypeDanger => 90
	];

Example progress bars with auto type:

echo ProgressBar::widget([
	'type' => ProgressBar::TypeAuto,
	'maxVal' => 100,
	'value' => 10
]);
echo ProgressBar::widget([
	'type' => ProgressBar::TypeAuto,
	'maxVal' => 100,
	'value' => 75
]);
echo ProgressBar::widget([
	'type' => ProgressBar::TypeAuto,
	'maxVal' => 100,
	'value' => 95
]);

Dynamically updated Progress Bar

More power comes when combined with knockout bindings. This results progress in bar reacting dynamically on data change. To make it knockout bindable simply pass JavaScript reference to view model as params.

Percent Based Progress Bar

Knockout JS binded progress bar, based on observable percent value. View model created here will be used in other examples too. Danger type is used here.

class ProgressBarVm extends Maslosoft\Widgets\Ko\Vm
{

	public $maxVal = 50;
	public $minVal = 0;
	public $percent = 15;
	public $value = 20;

}

$vm = new ProgressBarVm();
echo ProgressBar::widget([
	'type' => ProgressBar::TypeDanger,
	'percent' => $vm->percent
]);

Enter some values to see how it changes:

Maximum Value: Percent:

Value Based Progress Bar

Width of progress bar is calculated upon bindable numeric value. This one has warning type applied.

$vm = new ProgressBarVm();

// Assign value to observable
$vm->minVal = -20;
echo ProgressBar::widget([
	'type' => ProgressBar::TypeWarning,
	'maxVal' => $vm->maxVal,
	'minVal' => $vm->minVal,
	'value' => $vm->value
]);

Enter some values to see how it changes:

Minimum Value: Maximum Value: Value:

Dynamically updated progress bar with auto type

In this example the progress bar is automatically updated when value changes, and it will also change type of progress bar based on value.

$vm = new ProgressBarVm();

// Assign value to observable
$vm->maxVal = 100;
$vm->value = 77;
echo ProgressBar::widget([
	'type' => ProgressBar::TypeAuto,
	'maxVal' => $vm->maxVal,
	'value' => $vm->value
]);

Enter some values to see how it changes:

Maximum Value: Value: