The Progress Bar block in Frontis displays a colored bar that fills up to indicate progress or percentage, such as showing your skill level or how much work is completed.

Adding Frontis Progressbar Block 

To insert the Progressbar block, navigate to the post or page where you wish to include it. Next, tap the (+) plus icon located at the upper left corner of the display.

The Frontis menu bar interface will appear. Search for the Progressbar block in the search box or select it from the menu bar.

After inserting the Progressbar  blocks, follow the steps below;

• Click on the Document Overview button, and you will be able to view the block list on the right side.
• Click on the block; all the control tabs will show here (Basic, Style, and Extra).

Basic Section

Basic > Layout

• Layout Type: The Layout Type feature controls the direction of the progress bar. Such as horizontal or vertical.
• Text Position: The Text Position sets where the text appears on the progress bar, such as Inside or Outside the bar.
• Progress Number Position: The Progress Number Position feature sets where the number appears, like Default or With Progressbar.
• Progress Percentage: The Progress Percentage feature shows the percentage value on the progress bar.
• Progress Bar Height: The  Progress Bar Height controls the thickness of the bar to match your layout style.

Basic > Title

• Title: This feature allows you to add a Title to your progress bar. You can customize the Title Tag (H1-H6, P, and Span) here.

Style Section

Style > Progress Color

• Zebra Track Color: Enable the toggle to add Zebra Track Color. After that, you will see the Zebra Track Width section to adjust its width.
• Color: This section allows you to choose a classic or gradient color and add a background image.
• Border Radius: The border-radius feature rounds the corners of the progress bar with a value you choose.

Style > Progress Background Color

• Zebra Track Color: Enable the toggle to add Zebra Track Color. After that, you will see the Zebra Track Width section to adjust its width.
• Color: This section lets you set the background color.

Style > Number

• Typography: The typography section lets you change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height.
• Number Color: Here, you can change the Normal color and Hover color of the number as your work needs. 
• Margin: Margin adjusts an object’s placement by adding space around it. You can set margins for all sides or a single side. Click the link icon to change the margin as needed.

Style > Number

• Typography: The typography section lets you change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height.
• Color:  Here, you can set the title’s Normal and Hover colors as required.
• Margin: Margin adjusts an object’s placement by adding space around it. You can set margins for all sides or a single side. Click the link icon to change the margin as needed.

Extra Section

Z-Index: Consider the z-index as layers of sheets on a table. The greater the z-index, the more “above” the element appears. Therefore, if two elements intersect, the one with the greater z-index will be displayed in front.

However, it functions only when the element is positioned (relative, absolute, fixed, or sticky). Without it, z-index has no effect. 

Overflow section: The Overflow feature in the Advanced section of Frontis Blocks controls how extra content behaves when it goes beyond the block’s size. The overflow property determines the action to take in this scenario.

Values of overflow:

• Visible: The visible overflow value shows all content, even if it goes outside the box. It won’t be hidden or cut off, and no scrollbars will appear. 
• Hidden: The hidden overflow value hides any content that goes outside the box. It gets cut off, and no scrollbars appear, so users can’t see the extra content.
• Scroll: The scroll overflow value always shows scrollbars. If the content is too big, you can scroll to see it. Even if there’s no extra content, scrollbars still appear.
• Auto: The auto overflow value adds scrollbars only when needed. If the content fits inside the box, no scrollbars show. If it overflows, scrollbars appear automatically.
• Clip: The clip overflow value hides any content that overflows the box without showing scrollbars. The extra content is simply cut off and cannot be seen or scrolled.

Padding: Padding allows you to add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and add or reduce the padding on any side you want.

Margin: Margin enables the adjustment of an object’s placement on the canvas. With this feature, you can add a margin around an object or a single side. Click on the Link icon and add or reduce the Margin on any side you want.

Border and Shadow: You can place a border around the entire area and adjust the border color and border-radius. This option allows you to apply a box shadow to the Progressbar block.

Responsive Control: In this section, you will get 3 switches (Hide on Desktop, Hide on Tablet, Hide on Mobile). These switches let you show or hide the section on different devices.

Custom CSS: If you are an expert or have coding knowledge, you can add custom CSS in this section to make it responsive.