Animated Doughnut Graph

No Code
All Awesome
Webflow

do you want to show how AWESOME you are?

Doughnut graphs are a visual way to show your PROFICIENCY in a particular skill.

92%
Strategy
digital Strategy - 95%
Information ARCHITECTURE - 85%
Content Strategy - 92%
Business Strategy - 95%
92%
Strategy
digital Strategy - 95%
Information ARCHITECTURE - 85%
Content Strategy - 92%
Business Strategy - 95%
1

Know your elements - 1 base circle, 1 top circle, 4 progress divs, 1 progress mask, 1 start position holder

2

Creating the circles -A circle is created when a square div is given a border radius of 50%

3

The whole interaction plays within the base circle - so make sure to set it to relative. This will make sure it plays nice with the absolute elements.

4

The starting position is set by the base-grid element. It's set to absolute and anchored to the bottom left corner. This means that the interaction starts middle left of the circle. The width and height should be set to be half that of the circle.

5

You can now add your progress divs inside the base grid. These divs should all have the same class. Use that class to set the color of the progress bar. The height and width need to match the base-grid element. Set the absolute positioning of the progress elements to be top right. 

6

Next set the radius of the bottom left corner of the progress class to 100%. Also set the origin on these elements to be the top right.

7

Set the progress mask - all this element does is hide the progress-bars until it's time to reveal them. Give this element the same settings as the progress-bars, but set the z-index of 2 and make the background colour match the base circle.

8

The interactions for this effect are very simple. You will create and place a scroll interaction on each progress-bar. You will then set the progress-bars to rotate however many degrees you want to display. The first progress bar can rotate up to 90 degrees the equivalent of 25%. The next progress-bars can rotate 180 degrees, 270 degrees and 360 degrees respectively. Each new rotation is longer then the last so make sure to add more time on the transition; 90 degree - 500ms, 180 degress - 1000ms and so on.

1

Know your elements - 1 base circle, 1 top circle, 4 progress divs, 1 progress mask, 1 start position holder

3

The whole interaction plays within the base circle - so make sure to set it to relative. This will make sure it plays nice with the absolute elements.

5

You can now add your progress divs inside the base grid. These divs should all have the same class. Use that class to set the color of the progress bar. The height and width need to match the base-grid element. Set the absolute positioning of the progress elements to be top right. 

7

Set the progress mask - all this element does is hide the progress-bars until it's time to reveal them. Give this element the same settings as the progress-bars, but set the z-index of 2 and make the background colour match the base circle.

2

Creating the circles -A circle is created when a square div is given a border radius of 50%

4

The starting position is set by the base-grid element. It's set to absolute and anchored to the bottom left corner. This means that the interaction starts middle left of the circle. The width and height should be set to be half that of the circle.

6

Next set the radius of the bottom left corner of the progress class to 100%. Also set the origin on these elements to be the top right.

8

The interactions for this effect are very simple. You will create and place a scroll interaction on each progress-bar. You will then set the progress-bars to rotate however many degrees you want to display. The first progress bar can rotate up to 90 degrees the equivalent of 25%. The next progress-bars can rotate 180 degrees, 270 degrees and 360 degrees respectively. Each new rotation is longer then the last so make sure to add more time on the transition; 90 degree - 500ms, 180 degress - 1000ms and so on.

Newsletter

Do you want to receive articles like this to your inbox? Signup and stay connected.

Thank you! We have sent you a confirmation email!

Oops! Something went wrong while submitting the form