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:

#StayTheFuckHome. Wash Hands. Wear gloves & mask if you have to leave home.

Might also interest you:

Symbol in RichText

Cloneable
CMS
Code

Insert a symbol element into a RichText. On a static or dynamic page.

Read more
White Arrow icon

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