1. Home
  2. Components
  3. progress()

progress()

Show the completion of progress.

progress( mixed $percent [, array $options = [] ] ) : string

Parameters

$percent int|array Required Percentage, an array or asociative array for multiple bars.

$options array Optional Additional options.

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

Basic Usage

echo progress(40);

HTML Output

40%
<div class="progress mb-2">
    <div class="progress-bar" style="width: 40%;">40%</div>
</div>

Auto colors and multiple values

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

20%
75%
<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>

With titles and different colors

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

First 15%
Second 30%
Third 55%
<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>
Report issue Edit on GitHub