Laravel 11 Livewire 3 wire:loading - Add Loading

In this tutorial, I’ll show you how to add a loading spinner in Laravel 11 using Livewire 3's wire:loading directive. It helps improve UX by showing users something is happening when they click a button or submit a form.

We’ll go step by step with clear code examples—no complex stuff.

Laravel 11 Livewire 3 wire:loading – Add a Loading Spinner

wire:loading is a directive in Livewire that shows or hides elements based on the loading state of a Livewire component. You can use it to show a spinner, text, or even disable buttons while something is processing.

Let’s create a Livewire component that simulates loading.

Create Component

php artisan make:livewire SpinnerTest

Update Component Class

app/Livewire/SpinnerTest.php

namespace App\Livewire;

use Livewire\Component;

class SpinnerTest extends Component
{
    public $loading = false;

    public function loadSomething()
    {
        sleep(2); // simulate delay
    }

    public function render()
    {
        return view('livewire.spinner-test');
    }
}

Blade View with Spinner

resources/views/livewire/spinner-test.blade.php

<div>
    <button 
        wire:click="loadSomething" 
        class="px-4 py-2 bg-blue-500 text-white rounded"
    >
        Load Data
    </button>

    <!-- Spinner shown only while loading -->
    <span wire:loading wire:target="loadSomething" class="ml-2 text-gray-500">
        Loading...
    </span>
</div>

Replace the loading text with an SVG spinner or custom HTML.

<span wire:loading wire:target="loadSomething" class="ml-2">
    <svg class="animate-spin h-5 w-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 11-8 8z"/>
    </svg>
</span>

Prevent double-clicks or duplicate submissions:

<button 
    wire:click="loadSomething" 
    wire:loading.attr="disabled"
    class="px-4 py-2 bg-blue-500 text-white rounded"
>
    Load Data
</button>

You can also style it differently while disabled:

<button 
    wire:click="loadSomething"
    wire:loading.class="bg-gray-400 cursor-not-allowed"
    class="px-4 py-2 bg-blue-500 text-white rounded"
>
    Load Data
</button>

1. Show spinner while form submits
2. Hide parts of UI during load
3. Add overlay or loading screen

<div wire:loading class="fixed inset-0 bg-white bg-opacity-75 flex items-center justify-center z-50">
    <p>Loading, please wait...</p>
</div>

You might also like:

• Read Also: Laravel 11 Livewire 3 wire:model - Bind Form Input
• Read Also: How to Image Upload Laravel 11 Vue 3 Example
• Read Also: How To Upload And Preview Image In React JS
• Read Also: Adding Bootstrap 5 To Angular 15: Step-by-Step Guide