Show the completion of progress.
progress( mixed $percent [, array $options = [] ] ) : string
$percent int|array Required Percentage, an array or asociative array for multiple bars.
$options array Optional Additional options.
Name | Type | Default | Description |
---|---|---|---|
id | string | '' | Wrapper ID. |
class | string | '' | Class for wrapper. |
attributes | array | [] | Array of custom attributes. |
item_class | string | '' | Class for item. |
color | string/array | 'default' | Progress bar background color. Or array with colors. Possible value: default/success/warning/error |
auto_colors | object | null | Function that sets the color depending on the width of the bar. |
percents | bool | true | Show percent in title. |
echo progress(40);
HTML Output
<div class="progress mb-2">
<div class="progress-bar" style="width: 40%;">40%</div>
</div>
echo progress([20, 75,], [
'auto_colors' => static function (int $num): string {
$class = 'default';
if ($num > 71) {
$class = 'success';
} elseif ($num > 55) {
$class = '';
} elseif ($num > 25) {
$class = 'warning';
} elseif ($num < 25) {
$class = 'error';
}
return $class;
},
]);
HTML Output
<div class="progress mb-2">
<div class="progress-bar bg-danger" style="width: 20%;">20%</div>
<div class="progress-bar bg-success" style="width: 75%;">75%</div>
</div>
In this case, every bar will have a title and different color.
echo progress([15 => 'First', 30 => 'Second', 55 => 'Third',], [
'color' => ['error', 'warning', 'success'],
]);
HTML Output
<div class="progress mb-2">
<div class="progress-bar bg-danger" style="width: 15%;">First 15%</div>
<div class="progress-bar bg-warning" style="width: 30%;">Second 30%</div>
<div class="progress-bar bg-success" style="width: 55%;">Third 55%</div>
</div>