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

Livewire Loading States: Better UX

Improve user experience with loading states and progress indicators in Livewire.

24 December 20251 min readLaravelاقرأ بالعربية

On this page

  1. Basic Loading Indicator
  2. Target Specific Actions
  3. Loading Classes
  4. Remove Elements While Loading

Show loading states effectively:

Basic Loading Indicator

blade
<div wire:loading>
    Processing...
</div>

Target Specific Actions

blade
<button wire:click="save">
    Save
</button>
<div wire:loading wire:target="save">
    Saving...
</div>

Loading Classes

blade
<div wire:loading.class="opacity-50">
    <!-- Content dims while loading -->
</div>

Remove Elements While Loading

blade
<div wire:loading.remove>
    Ready
</div>
All articles

Keep reading

  • Laravel Action Classes Pattern16 January 20261 min read
  • Laravel Action Classes: Single Responsibility16 January 20261 min read
  • Laravel API Rate Limiting16 January 20261 min read