ScrollProgress

Open in Playground

Shows how far down the page the reader is, in two variants. bar (the default) is a thin line along the top of the page (edge="bottom" for the bottom) that fills as they scroll; button is a BackToTop button wrapped in a ring that fills instead.

It measures the page by default. For a scrolling panel pass target and fixed={false}, inside a relative wrapper. The bar is a progressbar for assistive technology. The same measurement is available as the useScrollProgress hook.

Banana fact 1. Scroll down and watch the bar at the top of the box.

Banana fact 2. Scroll down and watch the bar at the top of the box.

Banana fact 3. Scroll down and watch the bar at the top of the box.

Banana fact 4. Scroll down and watch the bar at the top of the box.

Banana fact 5. Scroll down and watch the bar at the top of the box.

Banana fact 6. Scroll down and watch the bar at the top of the box.

Banana fact 7. Scroll down and watch the bar at the top of the box.

Banana fact 8. Scroll down and watch the bar at the top of the box.

Banana fact 9. Scroll down and watch the bar at the top of the box.

Banana fact 10. Scroll down and watch the bar at the top of the box.

Banana fact 11. Scroll down and watch the bar at the top of the box.

Banana fact 12. Scroll down and watch the bar at the top of the box.

Banana fact 13. Scroll down and watch the bar at the top of the box.

Banana fact 14. Scroll down and watch the bar at the top of the box.

variant="button" is the back-to-top button with a progress ring; it appears after threshold px, like BackToTop.

Banana fact 1. The ring around the button shows how far down you are.

Banana fact 2. The ring around the button shows how far down you are.

Banana fact 3. The ring around the button shows how far down you are.

Banana fact 4. The ring around the button shows how far down you are.

Banana fact 5. The ring around the button shows how far down you are.

Banana fact 6. The ring around the button shows how far down you are.

Banana fact 7. The ring around the button shows how far down you are.

Banana fact 8. The ring around the button shows how far down you are.

Banana fact 9. The ring around the button shows how far down you are.

Banana fact 10. The ring around the button shows how far down you are.

Banana fact 11. The ring around the button shows how far down you are.

Banana fact 12. The ring around the button shows how far down you are.

Banana fact 13. The ring around the button shows how far down you are.

Banana fact 14. The ring around the button shows how far down you are.

Props

  • variant'bar' | 'button'
    Default: 'bar'

    A bar along the edge of the page, or a back-to-top button with a progress ring.

  • targetHTMLElement | RefObject<HTMLElement>
    Default: the page

    What scrolls: an element or a ref to one.

  • fixedboolean
    Default: true

    Fix it to the viewport; false places it inside the nearest relative parent.

  • labelstring
    Default: 'Reading progress'

    Accessible name (the button variant uses Back to top).

  • edge'top' | 'bottom'
    Default: 'top'

    Bar: which edge it sits on.

  • thicknessnumber
    Default: 4

    Bar: thickness in px.

  • barClassNamestring

    Bar: classes for the fill. Set the --xd-progress CSS variable to colour the bar and the ring.

  • thresholdnumber
    Default: 300

    Button: show it after this many pixels of scrolling.

  • position'bottom-right' | 'bottom-left' | 'bottom-center'
    Default: 'bottom-right'

    Button: which corner it sits in.

  • size'sm' | 'md' | 'lg'
    Default: 'md'

    Button: size of the button.

  • classNamestring
    Default: ''

    Extra classes for the root element.

Related hooks and theme:useScrollProgress