White Arrow icon
Back to all Elements

Round Scroll Indicator / Progress Bar

A round scroll indicator mad with Webflow elements and interactions

Cloneable
Interactions
Animation

Inspired by this post, a clonable tiny resource with a round progress bar.

  • Clonable
  • Fits for any purpose
  • Native Webflow elements & interactions
  • Fully customizable

`.indicator-wrap`

This selector is for the location and the size of the indicator - Change these for different location and size of the indicator (Keep the size in 1:1 ratio).

`.circle-l` & `.circle-r`

These selectors are for the 2 halves with `overflow:hidden` - Do not change these.

`.circle`

This combined with `.left` & `.right` are for the actual border - Change border color of these for a different circle color.

Preview:

Share:

Michael's Vsauce was my gateway Youtube channel to the world of fun educational vlogs. This was the 1st video I stumbled upon.

Might also interest you:

Pass Parameters

Cloneable
Code

Pass input fields parameters and add them to the destination URL.

Read more
White Arrow icon

Before / After effect

Cloneable
Tricks
Interactions

A Before / After effect for photos, without any code. Only Webflow's interaction.

Read more
White Arrow icon

Hover to reveal Mask

Cloneable
Code
Design

A fixed background image that is revealed by mouse hover all over the section

Read more
White Arrow icon