All LibraryPricingDemo
Resources
Webflow ComponentsWebflow DOM ElementsCovert 10,000+ SVG to DOM. ChatGPT Prompts for Webflow
LoginLogout
LogoutLoginSign up

Scroll Progress Bar

Add line progress bar as user scrolls through a content wrapper and add progress number with it.
Get Library
View Demo
Required Script*
Copy this <script> and paste into the Body or Head of your page
<!-- [Attributes by Flowscriipt] Scroll Progress -->
<script async src="https://cdn.jsdelivr.net/gh/manuelogomigo/flowscriipt/scroll-progress/script.js"></script>
Copy Script
Required Attributes*
I want this Div to be the wrapper of the my content
Add this attribute to the parent div wrapping your content
Name
ct-scroll-progress
Value
wrapper
I want to target thisDiv as the line progress bar as they scroll
Add this attribute to the parent div wrapping your content
Name
ct-scroll-progress
Value
line
Optional Attributes*
I want this Text or Text Span to show progress of the scroll [0-100]
Name
ct-scroll-progress
Value
number
I want to have more than one progress bar on the same page
You can add more than one Progress bar in the same page, just follow this steps.

Example
Instance 2
ct-scroll-progress="wrapper2"
ct-scroll-progress="line2"
ct-scroll-progress="number2"

Instance 3
ct-scroll-progress="wrapper3"
ct-scroll-progress="line3"
ct-scroll-progress="numbe3"

and so on
0 %
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Add Functionalites to Webflow without code. ✊🏽
Be the first to try out new libraries and updates.
Subscribe
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Links
All LibrariesWebflow ComponentsMulti-step FormsChatGPT Prompts for Webflow
Flowscriipts ©2024. All rights reserved.
Made forWebflow