E1 - Diagram Overview

Create customizable Progress Circles to visually represent percentages or progress levels, with options to adjust size, color, animation, and add a header.

---

Block Option

• Progress Circle: A simple Circle indicating the Progress in a certain domain or anything comaprable of your choice.

How to Set Up a Progress Circle for the Overview

Follow these steps to create and customize a Progress Circle:

1. Add a Header (Optional)

   • Use a header to introduce or categorize your progress indicators (e.g., Project Milestones or Department Goals).

2. Select the "Progress Circle" Block

   • This block will generate a circular graphic indicating progress as a percentage.

3. Name Your Progress Circle

   • Label each circle according to what it represents, such as Design, Content, or Marketing.

4. Customize the Progress Circle

   • Size: Adjust the size to fit your layout needs—larger sizes work well for high-priority indicators.

   • Color: Choose a color that aligns with your theme or provides quick recognition of each category.

   • Animate Duration: Set an animation duration if you want the progress percentage to appear gradually. This feature can add a smooth, dynamic effect when the page loads.

5. Set the Percentage

   • Define the progress level by setting a specific percentage, which will display within the circle.