Today I want to explain to you how to create a gradient circle progress on your WordPress website with free Elementor Page Builder and one of our WordPress Elementor themes. For this, you will need a widget called Circle Progress. You can get this widget and many others if you download and install JetElements plugin.
So let’s begin.
- Open Elementor and search for the Circle Progress widget among the Elements.
- Grab this widget and drop it in the center.
- On the left, you will see three sections.
- Go to the Content section to set the basic values.
- In the Settings block, you will see three positions to edit the size: Circle Size, Value Stoke Width, and Background Stoke Width. Type in your own numbers and go to the next section.
- In the Values block, you can change the current percentage.
- Now, let’s go to the Style section.
- Here you can change the progress line endings. They can be rounded or flat–it's up to you.
- Then pay attention to the Value Stroke Type option. Here you can change the type of the progress color circle to be classic or gradient.
- When choosing the second one, just grab a few colors that you want to assign to your gradient. You can combine any colors you wish just the same way you usually do with the gradient.
- Also, you can adjust Value Stroke Angle and change the angle where this gradient goes.
- Also, there is a way to change the Background Stroke Color - the part of the circle which is not filled with this progress. You can make it a gradient as well.
- And that’s it - we have achieved a gradient in the progress circle.
Final Say
So now you know how to add a circle progress widget filled with a gradient pretty easily with the JetElements plugin. I hope you have enjoyed it. If you still have any questions - ask them below in the comments.
Read Also
Elementor From A to Z: Sheer Selection Of “How To” Tutorials
How to Set Up Blog Post Lists with Elementor Page Builder
A Step-by-Step Guide For Creating Gradient Overlay Using Elementor Blending Modes