Scroll Progress Bar

Add line progress bar as user scrolls through a content wrapper and add progress number with it.

Required Script*

Copy this <script> and paste into the Body or Head of your page

<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.