> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Loading indicator Blade component

> [!WARNING]
>
> 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](https://filament-34a8cf01.mintlify.site/5.x/components/loading-indicator.md).

## Introduction

The loading indicator is an animated SVG that can be used to indicate that something is in progress:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::loading-indicator class="h-5 w-5" />
```

Loading preview

![A loading indicator](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/loading-indicator/simple.jpg)

## 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:

```php theme={"theme":"gruvbox-dark-hard"}
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:

```php theme={"theme":"gruvbox-dark-hard"}
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.

> [!WARNING]
>
> 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 this page on GitHub](https://github.com/filamentphp/filament/edit/4.x/docs/12-components/03-loading-indicator.md)

## Sponsored by

[Your logo here](https://github.com/sponsors/danharrin)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.