Maslosoft Framework Logo Maslosoft Framework Documentation
Flexible Application Foundation

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
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

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:

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: