# EuiLoadingDirective

**Type:** directive



Directive displaying a loading spinner icon inside input fields during async operations.
Dynamically creates and positions a loading icon that appears when euiLoading is true.
Automatically manages wrapper div for icon positioning and handles readonly state.
Compatible with euiClearable directive for combined loading and clear functionality.

```html
<input euiInputText [euiLoading]="isSearching" [(ngModel)]="searchTerm" />
```

```typescript
isSearching = false;

onSearch() {
  this.isSearching = true;
  this.api.search().subscribe(() => this.isSearching = false);
}
```

### Accessibility
- Loading icon positioned at end of input for visual feedback
- Input becomes readonly while loading to prevent changes during operation
- Icon has aria-label for screen reader announcement

### Notes
- Loading icon automatically positioned at input end
- Works alongside euiClearable directive without conflicts
- Wrapper div created automatically for icon positioning
- Input set to readonly state when loading is active


**Selector:** `[euiLoading]`

## Inputs
- **euiLoading**: `boolean` - 
- **readonly**: `any` -