# Show progress with a progress bar

> A progress bar is a visual indicator that shows how far someone has gone within a piece of content It starts at 0 empty and fills up as the person moves forw

Source: https://help.genially.com/en_us/show-progress-with-a-progress-bar-rk11bnQDx

Last updated: 2026-06-18T12:03:13.437Z

A progress bar is a visual indicator that shows how far someone has gone within a piece of content. It starts at 0 (empty) and fills up as the person moves forward, until the full journey is complete.

This element **stays** **fixed** across all pages of your creation and makes it easy to stay oriented: you’ll know where you are, how much you’ve completed, and what’s left. It’s especially useful for **multi**\-**page** content because it turns navigation into a clear path toward the finish line.

  

In Genially, the progress bar fills **as you move from page to page,** reflecting real progress that’s proportional to the content.

  

## Key features

*   The progress bar is a flexible, visual element designed to improve the navigation experience:
*   It advances by percentage when you **change pages.**
*   By default, it applies to **your entire creation**, but you can choose to show it only on selected pages.
*   The progress percentage when switching pages depends on the total number of pages where the bar is shown.
*   It reflects real progress, with no decimals, across different states:
    *   Initial: 0%
    *   In progress: between 1% and 99%
    *   Completed: 100%
*   You can customize the **color** and size.
*   The bar itself gives enough context about progress, so you can choose not to display the numeric values.
*   You can trigger actions when the progress is completed, such as an effect or audio playback.

  

## How to add a progress bar

Adding a progress bar to your creation is easy:

1.  In the left sidebar, click **AI Builder**. There, you'll find the **Navigation** section. Select **Progress Bar**.
    
2.  A right-side panel will open with several configuration options. From there, you can choose which **pages** display the progress bar (all pages or only selected ones). There's no need to copy and paste the progress bar onto other pages—simply choose where it should appear. This helps prevent duplicate or overlapping progress bars.
    
3.  You can also customize its appearance using the color pickers to select the **colors** you prefer.
    
4.  Finally, you can add actions that are triggered when the progress bar is completed, such as applying an effect or playing audio.
    

![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/3d94df05063fbe079c07aafaeb929e6f.gif)

  

## A few ideas for using a progress bar

A progress bar is a versatile resource that adapts to different content types and goals:

1.  **Trainings or courses**. Great for encouraging learners to complete modules, lessons, or activities—and for breaking content into more achievable chunks.
2.  **Challenges or missions**. Perfect for boosting participation and making goals feel within reach.
3.  **Content consumption**. Handy for tracking reading or navigation and seeing the percentage completed.
4.  **Sequences or steps.** Useful for guiding users through sequential processes like forms, surveys, or learning paths.

Now you’ve seen it: a progress bar doesn’t just inform—it **motivates, guides, and supports**. It turns the experience into a clear journey toward a goal and helps more people make it all the way to the end.