# EuiLoadingDirective

**Type:** directive

<p>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.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;input euiInputText [euiLoading]=&quot;isSearching&quot; [(ngModel)]=&quot;searchTerm&quot; /&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">isSearching = false;

onSearch() {
  this.isSearching = true;
  this.api.search().subscribe(() =&gt; this.isSearching = false);
}</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Loading icon positioned at end of input for visual feedback</li>
<li>Input becomes readonly while loading to prevent changes during operation</li>
<li>Icon has aria-label for screen reader announcement</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Loading icon automatically positioned at input end</li>
<li>Works alongside euiClearable directive without conflicts</li>
<li>Wrapper div created automatically for icon positioning</li>
<li>Input set to readonly state when loading is active</li>
</ul>


**Selector:** `[euiLoading]`

**Standalone:** false

## Inputs

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