Skip to main content

Documentation Index

Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.Looking for the current stable version? Visit the 5.x documentation.

​
Introduction

The loading indicator is an animated SVG that can be used to indicate that something is in progress: 
<x-filament::loading-indicator class="h-5 w-5" />

​
Replacing the default loading indicator

Filament renders the loading indicator through the Filament\Support\Contracts\LoadingIndicator contract, which is bound to Filament\Support\View\DefaultLoadingIndicator by default. You may replace it with your own implementation by binding a different class in a service provider: 
use App\Support\CustomLoadingIndicator;
use Filament\Support\Contracts\LoadingIndicator;

public function register(): void
{
    $this->app->bind(LoadingIndicator::class, CustomLoadingIndicator::class);
}
Your class must implement the LoadingIndicator contract, whose toHtml() method receives a ComponentAttributeBag and returns the indicator’s HTML: 
namespace App\Support;

use Filament\Support\Contracts\LoadingIndicator;
use Illuminate\View\ComponentAttributeBag;

class CustomLoadingIndicator implements LoadingIndicator
{
    public function toHtml(ComponentAttributeBag $attributes): string
    {
        return <<<HTML
            <svg {$attributes->toHtml()}>
                <!-- ... -->
            </svg>
        HTML;
    }
}
The attributes already contain the fi-icon fi-loading-indicator and size hook classes, so you can forward them directly to your root element.
The resolved LoadingIndicator instance is cached for the lifetime of the PHP process. Under Laravel Octane, this means the binding is only resolved once when the worker boots and will not be re-resolved between requests. Register your binding in a service provider rather than rebinding it at runtime.