Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Livewire

Building a Progress Bar with Livewire v4

Show progress for long-running tasks.

1 February 20261 min readLivewireاقرأ بالعربية

On this page

  1. Component

Build a progress indicator.

Component

php
@php
new class extends Livewire\Component {
    public int $progress = 0;
    public bool $processing = false;
    
    public function process(): void
    {
        $this->processing = true;
        $this->progress = 0;
        
        for ($i = 1; $i <= 100; $i++) {
            usleep(50000);
            $this->progress = $i;
        }
        
        $this->processing = false;
    }
}
@endphp

<div>
    <button wire:click="process" :disabled="$processing">Start</button>
    <div class="progress-bar" style="width: {{ $progress }}%"></div>
    <span>{{ $progress }}%</span>
</div>
All articles

Keep reading

  • Authorization in Livewire v4 Components1 February 20261 min read
  • Blaze Pre-Compiler: Massive Performance Gains in Livewire v41 February 20261 min read
  • Building a Bookmark Feature with Livewire v41 February 20261 min read