Webflow + Lotties

Circular Progress Bar w/ Lotties

No items found.
Overview
Controlling Lotties w/ Javascript
002
Lottie Tools & Alternatives
003
Circular Progress Bar
Circular Progress Bar w/ Lotties
5:33
102
Lottie + Interactions
8:44
102
Lottie + JavaScript
5:42
103
JavaScript-only
3:57
104
Choosing a Lottie
7:47
106
No items found.

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

Lotties

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.