Jump to content
Search Community

Circular Progress Bar for a Section

Volt 22 test
Moderator Tag

Recommended Posts

Hello everyone,

I want to achieve the design as is on the webpage: https://decorsystems.com.au/about#approach

The implementation of the circular progress design was with svg but I am using div blocks.
I already have the small circles in position.

 

How do I achieve the circular progress movement?

How do I make the progress bar stop on every small circle?

See the Pen qBxvjGy by voltmeup (@voltmeup) on CodePen

Link to comment
Share on other sites

Thank you @steveS and @PointC for the replies.

@SteveS, please can you elaborate on your solution? Not really sure how to start.
@PointC, that was my initial approach, but frankly, I know close to nothing about SVGs.

Link to comment
Share on other sites

1 hour ago, Volt 22 said:

I know close to nothing about SVGs

Time to learn then. ;)

 

This is how I'd set it up. A couple big circles and eight smaller ones. Using svgOrigin we can rotate the small ones into place and use drawSVG to animate the path. This should get you started.

 

See the Pen xxYBPYP by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

1 hour ago, GreenSock said:

Probably because you set autoRound: true which rounds the values :)

 

I'm curious why you did that. 

It was doing it before, I tried false but it didn't help, guess I tried true and then forgot. Either way it is choppy. I know I've done it before smoothly so I'm not sure what the deal is here.

Link to comment
Share on other sites

Oh, that's definitely a browser rendering thing. Increase the duration to like 60 seconds, open dev tools and look at what's happening. GSAP is animating the CSS variable perfectly, but Firefox is only rendering when it crosses a whole number threshold. So 48.1%, 48.4%, 48.7%, etc. all render exactly the same as 48%. Silly browser. I don't see a way to work around the browser bug right now. I'd go the SVG route personally.

  • Like 1
Link to comment
Share on other sites

Huh, I'll file a bug report with Mozilla if there isn't one already. This use case isn't so important since SVG is just a better option, but animating CSS variables in gradients is a trick I've used before and it shouldn't be breaking.

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...