Loading indicator Blade component - 组件

简介

加载指示器(Loading indicator)是一个动画 SVG，可用于指示某事正在进行中：

<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.

NOTE

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.

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion

#简介

#Replacing the default loading indicator

简介

Replacing the default loading indicator