Jan 23, 2021
White Arrow icon
Back to all Elements

Round Scroll Indicator / Progress Bar

A round scroll indicator mad with Webflow elements and interactions

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

When your bath soap bar gets too small to use, don't throw it away! open the next bar, and when you finish showering, stick the small old bar to the back of the new bar. Onces they both dry, they will become one.

Might also interest you:

3d Video Slider (swiper.js)

Cloneable
CMS
JavaScript

A 3d slider with video items, plays and pauses on click & slide change.

Read more
Blue arrow iconWhite Arrow icon

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
Blue arrow iconWhite Arrow icon

Desktop Grid, Mobile Slider

Cloneable
Tricks
Layout

Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.

Read more
Blue arrow iconWhite Arrow icon