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

Building a Countdown Timer with Livewire v4

Create a countdown timer component.

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

On this page

  1. Component

Build a countdown timer.

Component

php
@php
new class extends Livewire\Component {
    public int $seconds = 60;
    public bool $running = false;
    
    public function start(): void
    {
        $this->running = true;
    }
    
    public function tick(): void
    {
        if ($this->running && $this->seconds > 0) {
            $this->seconds--;
        }
        if ($this->seconds === 0) {
            $this->running = false;
        }
    }
}
@endphp

<div wire:poll.1s="tick">
    <span>{{ gmdate('i:s', $seconds) }}</span>
    <button wire:click="start">Start</button>
</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