# Loading bar

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Variants

| Prop      | Effect                                                                                        |
| --------- | --------------------------------------------------------------------------------------------- |
| `isFixed` | Switches from absolute positioning within the container to `position: fixed` in the viewport. |

## Props / API

### `LoadingBar`

| Prop          | Type      | Default | Description                                                                  |
| ------------- | --------- | ------- | ---------------------------------------------------------------------------- |
| `isFixed`     | `boolean` | `false` | Renders the bar with `position: fixed` instead of absolute positioning.      |
| `positionTop` | `number`  | -       | Distance in pixels from the viewport top. Required when `isFixed` is `true`. |

Extends `HTMLAttributes<HTMLDivElement>`. All standard `<div>` attributes are forwarded to the outer element via `...props`.

## Code examples

```tsx
import { LoadingBar } from "@mylighthouse/prism-react";

export default function LoadingBarExample(): React.JSX.Element {
  return (
    <>
      <div style={{ position: "relative", height: 100 }}>
        <LoadingBar />
      </div>
      <LoadingBar isFixed positionTop={5} />
    </>
  );
}
```

## A11y intent

_[Design to fill]_

- If the loading state must be announced, pair the bar with a live region rather than relying on the animation alone.

## Cross-references

_[Design to fill]_