Livewire

Building a Progress Bar with Livewire v4

February 01, 2026 1 min read 12 views

Build a progress indicator.

Component

@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

{{ $progress }}%
Share this post:

Related Posts

Comments (0)

Please log in to leave a comment. Log in

No comments yet. Be the first to comment!