Thank you!

I will get back to you as soon as possible.
m
Oops! Something went wrong while submitting the form.
Please refresh the page, and try again.
Or... email me here: avivtech@gmail.com
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

Live Example
Webflow Project Page (to Clone)
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
Copy

`.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.

Copy
Copy

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:

3d Video Slider (swiper.js)

Cloneable
CMS
JavaScript

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

Read more
White Arrow icon

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
White 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
White Arrow icon