[ @sdxc/ui/animations ]
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.
import { scrollProgress } from "@sdxc/ui/animations";Usage
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
scrollProgress(options?: ScrollProgress.Options): CSSMixinDescriptorReturns 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
mix={scrollProgress({ axis: "inline" })}Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/animations too.
Interface
ScrollProgress.Options
Options selecting which scroll axis a progress indicator tracks.
| 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". |