ProgressBar

Linear progress indicator with label, percentage display, colour variants, stripes, animation, and segmented display.

Basic Progress

Upload progress65%

Custom Value/Max

Tasks: 3 of 560%

Colour Variants

Primary80%

Success100%

Warning55%

Danger30%

Striped

Striped pattern70%

Animated

Animated stripes50%

Segmented Progress

Display multiple segments in a single progress bar, each with its own color.

Project Status0%

Storage: 800 GB / 1 TB

JavaScript API

Read and update progress values dynamically with JavaScript.

Controlled progress40%

Use the buttons above to control the progress bar...

// Basic with percentage
<?= $m->progressBar('upload')
    ->value(65)->max(100)
    ->label('Upload progress')
    ->showPercent() ?>

// Colour variants
<?= $m->progressBar('ok')->value(100)->success()->label('Done') ?>
<?= $m->progressBar('warn')->value(55)->warning()->label('Caution') ?>
<?= $m->progressBar('err')->value(30)->danger()->label('Low') ?>

// Striped and animated
<?= $m->progressBar('busy')
    ->value(50)->success()
    ->striped()->animated()
    ->label('Processing…')->showPercent() ?>

// Custom value/max
<?= $m->progressBar('tasks')
    ->value(3)->max(5)
    ->label('Tasks: 3 of 5')
    ->showPercent() ?>

// Segmented progress bar
<?= $m->progressBar('project')->max(100)
    ->label('Project Status')->showPercent()
    ->segments([
        ['value' => 45, 'variant' => 'success', 'label' => 'Done'],
        ['value' => 25, 'variant' => 'warning', 'label' => 'In Progress'],
        ['value' => 10, 'variant' => 'danger', 'label' => 'Blocked']
    ]) ?>

// Get progress bar instance
var pb = m.progressBar('myProgress');

// Read values
var current = pb.getValue();    // Get current value
var max = pb.getMax();          // Get max value
var pct = pb.getPercent();      // Get percentage (0-100)

// Update values
pb.setValue(75);                // Set to 75
pb.setValue(50, false);         // Set without animation

// Increment/decrement
pb.increment(10);               // Add 10
pb.decrement(5);                // Subtract 5

// Complete or reset
pb.complete();                  // Set to max (100%)
pb.reset();                     // Set to 0

// Change max value
pb.setMax(200);                 // Recalculates percentage

// Listen for changes
document.getElementById('myProgress')
    .addEventListener('m:progressbar:change', function(e) {
        console.log('Changed:', e.detail);
        // { oldValue, newValue, percent, max }
    });

// Complete event
document.getElementById('myProgress')
    .addEventListener('m:progressbar:complete', function(e) {
        console.log('Progress complete!');
    });

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->progressBar($id)`	`string`	Create a ProgressBar component.
`->value($v)`	`float`	Current progress value (min: 0).
`->max($m)`	`float`	Maximum value (default: `100`, min: 1).
`->label($text)`	`string`	Text label shown above the bar.
`->showPercent($show)`	`bool`	Show percentage next to the label (default: `false`).
`->variant($v)`	`string`	Colour: `primary`, `success`, `warning`, `danger`, `purple`.
`->primary()`		Shorthand for `->variant('primary')`.
`->success()`		Shorthand for `->variant('success')`.
`->warning()`		Shorthand for `->variant('warning')`.
`->danger()`		Shorthand for `->variant('danger')`.
`->striped($s)`	`bool`	Add diagonal stripe pattern.
`->animated($a)`	`bool`	Animate stripes (requires `->striped()`).
`->segments($segs)`	`array`	Array of segments: `[['value' => 30, 'variant' => 'success', 'label' => 'Done'], ...]`

JS JS Methods

Method / Property	Parameters	Description
`m.progressBar(id)`	`string`	Get ProgressBar instance.
`getValue()`		Returns current value as float.
`getMax()`		Returns max value as float.
`getPercent()`		Returns percentage (0-100).
`setValue(val, animate)`	`number, ?bool`	Set value. animate defaults to `true`.
`setMax(max)`	`number`	Set max value and recalculate percentage.
`increment(amount)`	`?number`	Add to value (default: 1).
`decrement(amount)`	`?number`	Subtract from value (default: 1).
`complete()`		Set to max (100%).
`reset()`		Set to 0.

EVENT Events

Event Name	Detail	Description
`m:progressbar:change`	`{oldValue, newValue, percent, max}`	Fired when value changes.
`m:progressbar:complete`	`{value}`	Fired when `complete()` is called.
`m:progressbar:reset`	`{}`	Fired when `reset()` is called.