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:

browser mockup
Share:
Heart icon

The videos Kurzgesagt channel creates are so beautifully animated, that I almost forget that I learn so much while watching them!

Might also interest you:

CMS Autocomplete

Cloneable
CMS
JavaScript

A short JavaScript code for transferring a CMS list into an autocomplete on an input field.

Read more
Blue arrow iconWhite Arrow icon

Auto get Current Year

Cloneable
Code
JavaScript

Automatically insert the current year to any element with the class of 'year'

Read more
Blue arrow iconWhite Arrow icon

Scroll Menu to Current Link

Cloneable
CMS
Code

Using JS to scroll a div (menu) to the current link inside.

Read more
Blue arrow iconWhite Arrow icon