Progress Bar

Overview#

A linear progress indicator. When value is supplied, renders as determinate progress in [0.0, 1.0]. Without a value (or with indeterminate), renders an animated wave.

For a circular spinner use <native:activity-indicator> instead.

Per Material 3, the progress fill uses theme.primary and the track uses theme.surfaceVariant. The optional color prop is an escape hatch for non-theme containers.

<native:progress-bar :value="0.65" />

Props#

• value - Current progress in [0.0, 1.0] (optional, float). Setting value implies indeterminate=false
• indeterminate - Force indeterminate mode (optional, boolean, default: false when value is set, otherwise true)
• color - Override the fill color as hex string (optional)
• track-color - Override the track color as hex string (optional)
• a11y-label - Accessibility label (optional)
• a11y-hint - Accessibility hint (optional)

Examples#

Determinate#

@php $progress = 0.65; @endphp
 
<native:column class="w-full gap-2 p-4">
    <native:row class="w-full justify-between">
        <native:text class="text-sm text-theme-on-surface">Uploading</native:text>
        <native:text class="text-sm text-theme-on-surface-variant">{{ round($progress * 100) }}%</native:text>
    </native:row>
    <native:progress-bar :value="$progress" />
</native:column>

Here $progress stands in for a public property on your component — declare public float $progress = 0.65; and update it as the work advances; the bar and the percentage label track it automatically.

Indeterminate#

<native:progress-bar indeterminate a11y-label="Loading" />

With color override#

<native:progress-bar :value="0.4" color="#22C55E" track-color="#DCFCE7" />

Element#

use Nativephp\NativeUi\Elements\ProgressBar;
 
ProgressBar::make()->value(0.65);
 
ProgressBar::make()->indeterminate();

• make() - Create a progress bar
• value(float $val) - Determinate progress in [0.0, 1.0]
• indeterminate(bool $value = true) - Force indeterminate mode
• color(string $hex) - Override the fill tint
• trackColor(string $hex) - Override the track color
• a11yLabel(string $value) - Accessibility label
• a11yHint(string $value) - Accessibility hint