# ASLoader

ASLoader is an indeterminate loading indicator with Grow, Spin, and Dots appearances. The application owns loading state and any operation being represented; the component does not measure progress or manage requests.

## Usage

The non-modal container is absolutely positioned and fills its containing block. Give it a positioned parent with enough space for the chosen loader.

```tsx
import { ASLoader, ComponentSize, LoaderType } from '@eleventheye/asui';

const LoadingPanel = ({ isLoading }: { isLoading: boolean }) => (
  <section aria-busy={isLoading}>
    <p role="status">{isLoading ? 'Loading results…' : 'Results ready.'}</p>
    <div aria-hidden="true" style={{ position: 'relative', minHeight: 80 }}>
      <ASLoader
        showLoader={isLoading}
        loaderType={LoaderType.Spin}
        size={ComponentSize.Medium}
      />
    </div>
  </section>
);
```

## Props

| Prop              | Meaning                                                                | Default                 |
| ----------------- | ---------------------------------------------------------------------- | ----------------------- |
| `showLoader`      | Whether to render the indicator                                        | Hidden when omitted     |
| `loaderType`      | `LoaderType.Grow`, `Spin`, or `Dots`                                   | `Grow`                  |
| `size`            | `ComponentSize.Small`, `Medium`, or `Large`                            | `Medium`                |
| `isModal`         | Portal the overlay to `document.body`                                  | `false`                 |
| `className`       | Class on the outer container                                           | `''`                    |
| `loaderClassName` | Class on the indicator                                                 | `''`                    |
| `style`           | Inline styles on the outer container                                   | Omitted                 |
| `theme`           | Complete `ASLoaderTheme` section replacement, not a full project theme | Inherited loader styles |
| `themeOverrides`  | Partial full-theme overrides, including `components.loader`            | Omitted                 |

See [ASLoaderProps](../src/asloader/ASLoader.types.ts) for the public type. Grow displays the fixed text `LOADING`; there is no custom label or numeric progress prop.

## Themes

Use provider inheritance or `themeOverrides` for new project styling:

```tsx
<ASLoader
  showLoader
  loaderType={LoaderType.Spin}
  themeOverrides={{
    components: {
      loader: {
        spinBorderColor: '#175cd3',
        spinBeforeColor: '#84adff',
        spinAfterColor: '#d1e0ff',
      },
    },
  }}
/>
```

`components.loader` configures Grow track/fill backgrounds, spinner colors, dot color, label typography, modal backdrop filtering, and per-size geometry. Grow's label uses `textColor`, not `growColor`. Loader geometry is separate from `tokens.size`; animation durations are fixed in CSS rather than controlled by shared motion tokens. Reduced-motion styles stop animation while retaining a visible indicator.

For compatibility, `theme` accepts the existing loader section type. It replaces the inherited loader appearance. Do not combine it with `themeOverrides`. See the [loader theme reference](./theme-reference.md#loaders--asloaderstyles) for all properties and preset defaults.

## Overlay and accessibility boundaries

The ordinary container allows pointer interaction through it. `isModal` creates an absolutely positioned overlay under `document.body`, with pointer interception and the themed backdrop filter. This is a visual loading overlay, not a focus-managed dialog: it does not trap focus, disable background keyboard access, lock page scrolling, or provide dismissal handling. Applications remain responsible for disabling actions while an operation is pending.

A visible modal loader requires a browser DOM because its portal uses `document.body`. Theme values are resolved before rendering the portal; CSS custom properties must also be available at its DOM destination. See [themes and portals](./theme-provider.md#css-custom-properties-and-portals).

The loader itself supplies no live region or progress semantics. Provide an application-owned status message and `aria-busy` on the affected region, as in the example. The public API does not forward arbitrary ARIA props or expose a ref. An `aria-hidden` wrapper around a non-modal decorative indicator does not hide a modal portal outside that wrapper.