This documentation provides comprehensive insights into the Progress Pie Block developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Progress Pie block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Progress Pie block.
3. After on the right side, Click on the Block. Then the Progress Pie details appear.
4. Here shows all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

This section provides control to change the layout of the progress pie, Let’s follow this,

1. Progress Percent: Set the precent for the progress pie.
2. Progress Duration (S): Set duration to show the progress.
3. Progress Percent Size: Set the size for the percent.

4. Progress File Size: Set the fixe size for the progress.
5. Enable Label: Enable the switcher to show the label.
6. Enable Suffix & Prefix: Enable the switcher to show the suffix and prefix.

Suffix & Prefix Section

Go to Basic > Suffix & Prefix

Set suffix and prefix by following,

1. Suffix: Set the suffix which will appear after the content.
2. Prefix: Set the prefix which will appear before the content.

Label Section

Go to Basic > Label

Set label by following,

1. Label: Set the label it will appear after the progress count.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Progress Section

Go to Style > Progress

Make the progress section stylish by following this controls,

1. Progress Size: Set the size for the progress.
2. Enable Progress Round: Enable the switcher to show the round progress.

3. Progress Percent Color: Set the progress percent color of it. Add more color by clicking on the ” + ” Icon.

4. Progress Fill Color: Set the fill color for the progress.

Content Section

Go to Style > Content

Make the content section more customizable by following the controls, It will change the apperance,

1. Background: Set the background for the content.

Number

2. Typography: Set the typography for the number.
3. Color: Set the color.
4. Suffix Color: Set the suffix color.

5. Prefix Color: Set color for the prefix.
6. Spacing: Make spacing between them.
7. Bottom Spacing: Set the spacing from the bottom.

Label

8. Typography: Set the typography for the label.
9. Color: Set the color of it.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial is coming soon!
Check the Demo Page.

Thanks for being with us!