Scroll progress

Each indicator tracks its own section. Scroll down to try all five examples.

Back to the component guide

Line

Scroll through this section to fill the indicator.

0% at the start · 100% at the end

Gooey

Scroll through this section to fill the indicator.

0% at the start · 100% at the end

Orbit

Scroll through this section to fill the indicator.

0% at the start · 100% at the end

Horizontal

Scroll through this section to fill the indicator.

0% at the start · 100% at the end

Start — scroll to the next section.

Middle — scroll to the next section.

Finish — scroll to the next section.