Circular progress bars have become a popular way to indicate how far you've progressed through a piece of content- including how far you've scrolled through a blog.
Usually it's displayed as a circular progress bar, sometimes with numbers inside like a percentage complete, and sometimes with animation effects including an ending animation at the 100% point.
Typically the best way to do this in Webflow is to use Webflow's scroll interaction with a Lottie, and bind them so that the scrolling ties to the frame of the animation.
As you scroll downward and upward, the lottie's current frame changes to that point of the animation sequence, and this creates a great effect with no code.
Note that you can use any Lottie, but one that is specifically designed for this purpose is usually best.
Resources
- Project cloneable, showing several ways to achieve this.
Lotties
- Finsweet's Lottieflow is an excellent resource, and has a category of countdown timers that is ideal for this purpose.
