> For the complete documentation index, see [llms.txt](https://docs.formsort.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.formsort.com/styling/customizing-appearance/progress-bars.md). # Progress bar Display user progress through a form flow. **Progress indicators** such as completion bars and step counts are helpful in giving responders a sense of how far along in the flow they are. Especially for longer flows, showing progress indicators can help conversion, as user expectations are set correctly from the outset, and feedback is given as every step is completed. To enable progress bars, see **Progress indicators** within the style set editor. ## Layout styles ![The linear layout type](https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJPnL__mOdr_mLZ8nwf%2F-MK_29XvYfSH3dLSl7sX%2F-MK_36WpfxMTIh30biRq%2Fimage.png?alt=media\&token=505320f9-bc93-4e22-8e99-b962d0c523bc) ![The subway stops layout type](https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJPnL__mOdr_mLZ8nwf%2F-MK_29XvYfSH3dLSl7sX%2F-MK_2yx-gwzSAAnxz6pp%2Fimage.png?alt=media\&token=9d574094-d45b-4714-99b3-253d513e7fd4) ![The text layout type](https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJPnL__mOdr_mLZ8nwf%2F-MK_29XvYfSH3dLSl7sX%2F-MK_3WUZicCepNK7ppby%2Fprogress-bar-text.png?alt=media\&token=dccf576c-242e-4b16-8903-8972983a242c) The sizes, colors, and other aspects of these layout types can be further customized within the style editor. ## Changing the vertical positioning You can use the **Vertical position** in the **Progress Indicator** menu within the style editor to change the placement of the progress bars. You can also use the [**Layout** editor](/styling/customizing-appearance/content-area-and-form-layout.md#layout-editor) to change the positioning of any of the components, including the progress indicators. ## Counting groups or steps By default, progress indicators show users the position of the user's current step within the total number of steps within the flow. In the case that you have a large number of steps, it might be useful to indicate progress by [groups](/creating-flows/building-a-new-flow/organizing-using-groups.md), by selecting **Groups** under **Count steps or groups?** ![Counting groups, with labels shown](https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJPnL__mOdr_mLZ8nwf%2F-MK_29XvYfSH3dLSl7sX%2F-MK_3ttoWC4zvvwkNwe7%2Fimage.png?alt=media\&token=9f25bf63-4a9b-4e90-9a09-ee69e72f301e) ## How is progress calculated? If your flow has steps which are only enabled based on a [condition](/conditions-and-logic.md), the number of steps available to the responder can change based on the answers that they provide. To avoid having a progress indicator that jumps around, the progress indicators always include every step in the denominator - the percentage completion is just `current step index / total number of steps`. This is why sometimes the progress bar may jump: the responder is skipping over steps that were conditionally disabled. Note that consecutive steps that all use the same variables as their condition but check for different values of that condition are collapsed together when calculating progress, as a responder would only ever be able to access one of those steps. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.formsort.com/styling/customizing-appearance/progress-bars.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.