Discover the best progress websites created by professional designers. Get inspired and start planning your perfect progress web design today!

Watch the tutorial for this at https://www.youtube.com/watch?v=2OUj7dPn3Ng

Get a more in-depth tutorial for this project at https://www.patreon.com/timothyricks

Interactive CMS Quiz

View the tutorial at https://www.patreon.com/posts/49192087

T.RICKS Form

T.RICKS Multi-Step Form

Info: I disabled the browser's default scroll bar on the desktop breakpoint using Custom CSS. 

You'll find the YouTube Tutorial here: https://youtu.be/l8cjr6lP9yk

Vertical Navbar with Progress Bar

Vertical Navbar for Scrollytelling One Pager with Progress Bar

Page Progress

Just a quick attempt at replicating something seen elsewhere—can definitely be improved upon but hopefully enough to demonstrate the principle. Interested to see anyone's improvements or other ways of achieving this effect!

You need to have a decent amount of content above and below this at the moment for it to be effective. Play with the interaction assigned to 'outer block' to tweak.

Progress Line

Section based progress line

032 - Page Progress Bar

032 Page Progress

Learn more about Dragdealer.js at https://www.patreon.com/posts/57936686

Images from https://k72.ca/en/about

Draggable Progress Bar Slider

Smooth Back To Top Button With Scroll Progress Indicator
▬▬▬▬▬
➊ Website @ www.fouroom.co
➋ Templates @ https://webflow.com/templates/designers/fouroom
➌ Twitter @ www.twitter.com/foouroomdotco
➍ Instagram @ www.instagram.com/fouroom.co
➎ Dribbble @ www.dribbble.com/fouroom
▬▬▬▬▬
Please ❤ this if you like it!

Back to top with progress indicator

A quick progress bar solution for a forum member, with different colour divs to match the current sections, which are revealed as a grey 'cover' div moves right on scroll.

https://forum.webflow.com/t/scroll-progress-indicator/66808 

Hope you also find it useful - as ever please share any projects where you use it, so we can see it in the wild :-)

Colour Change Progress

colour-change-progress

Took the webflow pricing table as the base, added some, hover, interactions with animated bars, sticky header, etc. Mobile ready (watch out for the hidden columns)! if you have questions let me know.

Used this section in my new webflow portfolio project http://www.web-bureau.webflow.io

If you wanna have more clonable content form this portfolio let me know in a comment.

Webflow Pricing Table

Advanced Pricing Table

This is a collection of fully customizable, animated Gauge & Progress Circle for data visualization or dashboard. You can customize:
- color
- stroke width
- stroke linecap
- stroke length (percentage)

All done natively in Webflow with IX2 and just a few lines of CSS. Just copy and paste one of the modules and start customizing!

If this made your day, consider https://www.buymeacoffee.com/jinchuah

Data Visualization : Gauge & Progress Circle Animation (Lottie)

A circle scroll progress indicator built entirely in Webflow interactions. No code required! Clone away, hopefully it can be useful to you!

Quick video about the thought process and layout here:

https://youtu.be/kxwkK6juP4E

Circle Progress Indicator

circle-progress-indicator

Hiii Guys !!
Here is the new landing page , its not so big , i made this not for a general landing page purpose but to build some cool interactions like progress bar, progress bar chat, and a cool DARK MODE SWITCH( ON/OFF ) and a beautiful Tab which u may use for FAQ's.

Whats Included-
1. Dark/Light Mode Switch.
2. Progress Bar in the top.
3. Progress Bar chats.
4. Modern Cool Tabs with Beautiful dropdown.

Clone it and make it yours.
Thanks

Follow me for more amazing Content.
Hire Me- kingfactory1234@gmail.com

Discover progress websites built by the Webflow community

Discover progress websites built by the Webflow community