Inline Edit Toggle

When toggled on, you will now see a gear icon appear to the right of the progress bar’s text which will allow you to edit the progress bar’s value without manually editing the code block itself.

Upon clicking, a popup panel will appear, displaying the progress bar’s current value in an editable text box, along with increment and decrement buttons, and options to apply or cancel changes.

Progress bars with task-linking tags automatically calculate their values and therefore do not display the gear icon or support inline editing.

Once you have altered the value in the text box, either directly, or by using the + and - buttons, you will need to click the Apply button to set the new value.

To exit the inline edit popup panel without making any changes, you can either click the Cancel button or click anywhere outside of the panel.

If your screen width is limited, the popup panel may adjust, with buttons arranged across multiple rows to fit. If the progress bar is at the bottom of the code block, you may need use the vertical scroll bar to view all the buttons.

Gear Icon Colors

You can change the color of the gear icon using the two colorpicker settings or select one of the light & dark presets.

Step Size

This is where you set the value you want to add or subtract when pressing the + and - buttons in every inline edit panel. The slider is set to 1 by default, but you can choose any value from 1 to 100.

Your step size will be displayed on both the + and - buttons so you know exactly what is being added or subtracted.

If the desired value isn’t reachable with the current step size, you can modify the step size in the settings or, for a faster or one-time adjustment, directly enter the value in the text box.

Override

If you have the Override large value error toggle in the Override error section turned on, then you can continue to increase the value past the total. As always, this overage will be highlighted with the percentage value changing color.

Automatic Top Margin

If the first Advanced Progress Bar in your code block has a gear icon, then the top margin will automatically be enlarged so that the code block’s </> is not obscuring the gear icon.

This will happen regardless of whether you have the Top margin toggle turned on in the Progress bar container section of the settings.