Scroll progress lab

A progress bar driven by scrolling through a CSS scroll-linked animation timeline.

Scroll timeline

Scroll this content

01

The bar reflects how far you have moved through this preview.

CSS can link animation progress to the scroll position without listening for events in JavaScript.

02

The bar reflects how far you have moved through this preview.

CSS can link animation progress to the scroll position without listening for events in JavaScript.

03

The bar reflects how far you have moved through this preview.

CSS can link animation progress to the scroll position without listening for events in JavaScript.

04

The bar reflects how far you have moved through this preview.

CSS can link animation progress to the scroll position without listening for events in JavaScript.

05

The bar reflects how far you have moved through this preview.

CSS can link animation progress to the scroll position without listening for events in JavaScript.

06

The bar reflects how far you have moved through this preview.

CSS can link animation progress to the scroll position without listening for events in JavaScript.

07

The bar reflects how far you have moved through this preview.

CSS can link animation progress to the scroll position without listening for events in JavaScript.

HTML + CSS code