The Progress Block gives your visitors a clear visual indicator of how far they’ve come in your flow and how many steps are left. By showing progress, you create transparency, reduce uncertainty, and keep users motivated to complete the flow -helping lower drop-off rates and improving overall engagement.

After clicking on a building block, you’ll find the Settings section on the right. This is where you can customize the block’s style, appearance, and behavior to tailor it perfectly to your flow.

In the General settings, you can define how your progress indicator should appear and behave. Filled elements specify how much progress has already been completed, while Total elements define the overall number of steps in your flow. You can also customize the style of the progress display by choosing between dots, rectangles, or a bar.

Set the block’s visibility to show only on mobile, desktop, or hide it completely. Additionally, you can select a background color for the block.

Control the block’s layout by adjusting its width (S, M, L, or maximum) and setting the block's padding from the top, bottom, left, and right.

After clicking on a building block, you’ll find the Design section on the right. You can quickly apply a preset style tailored to that block type. Also, customize colors to match your flow.

When you apply a design to one block type, it automatically updates all blocks of that type across your flow. This keeps your design consistent, clean, and easy to maintain without styling each block manually.

Also see Heyflow's other design options to individualize your flow and building blocks even more: