All videos

Build a scroll progress indicator

Trouble with this video? YouTube may be blocking it for you. Watch it directly on YouTube instead.

Build a scroll progress indicator

We'll create a horizontal progress indicator which scales as we scroll down the page. This lesson starts by covering the design of the div block used as the indicator, then moves into creating the scroll trigger, configuring the animation, and finally, adjusting the transform origin.

Video details

Duration

2:50

Topic

Design & build

Continue watching

Build a scroll progress indicator - 图1<h3>Migrate a site to Webflow</h3>1:16:53

Build a scroll progress indicator - 图2<h3>Cursor follow interactions</h3>10:25

Build a scroll progress indicator - 图3<h3>Build a cursor-following 3D button</h3>5:15

Build a scroll progress indicator - 图4<h3>Webflow MCP: Build an FAQ accordion with Claude</h3>8:19

Build a scroll progress indicator - 图5<h3>Page load interaction</h3>9:43

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Build a scroll progress indicator",
  "description": "We&#39;ll create a horizontal progress indicator which scales as we scroll down the page. This lesson starts by covering the design of the div block used as the indicator, then moves into creating the scroll trigger, configuring the animation, and finally, adjusting the transform origin.",
  "url": "https://university.webflow.com/videos/scroll-progress-indicator",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b9447ed435e31ed58dbae8_maxresdefault.webp",
  "duration": "2:50",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=Tjip23g2c4w",
  "embedUrl": "https://www.youtube.com/embed/Tjip23g2c4w",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "Webflow",
    "logo": {
      "@type": "ImageObject",
      "url": "https://assets-global.website-files.com/6009ec03c3b4e33e78af04aa/6516be62e5c189e9d4fa5e8f_webflow-logo.svg"
    }
  },
  "about": {
    "@type": "Thing",
    "name": ""
  }
}