# scrollProgress

> Grows a fill element in lockstep with its scrollable ancestor's scroll position, from the inline-start edge so it reads correctly in both writing directions.

```ts
import { scrollProgress } from "@sdxc/ui/animations";
```

Grows a fill element in lockstep with its scrollable ancestor's scroll
position, from the inline-start edge so it reads correctly in both writing
directions. Nest it in a fixed-size track; reduced motion ramps opacity.

## Signature

```ts
scrollProgress(options?: ScrollProgress.Options): CSSMixinDescriptor
```

Returns: A style mixin, applicable through a host element's `mix` prop.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options?` | `ScrollProgress.Options` | Selects the scroll axis the indicator tracks. |

## Examples

```tsx
mix={scrollProgress({ axis: "inline" })}
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/animations` too.

### ScrollProgress.Options

Options selecting which scroll axis a progress indicator tracks.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `axis?` | `"block" \| "inline"` | Scroll axis the indicator's timeline attaches to: `"block"` tracks vertical scroll (a reading-progress bar), `"inline"` horizontal scroll (a Carousel viewport). Defaults to `"block"`. |