====== Project-level Optional Property: Progress Bar   ======

The **Progress Bar** provides information for the **learner** on the proportion of pages in the project that have been opened. This is particularly helpful for those who are working through a learning object over multiple sessions.:!: **New in 3.14**, you can also add progress markers for **Chapters **and for **Milestones **(individual pages the author has flagged up as significant points in progress through the learning object.

This is a screenshot illustrating how the **Progress Bar** displays.  Here it has been set to display below the **Project **and **Page Titles **in the **Header Bar**.  This project has been organised in three **Chapters**, and if the learner clicks on one of the **circle markers **in the **Progress Bar**, this will take them to the first page in that **Chapter**.  The **red line** gives a visual indication of how much of the Learning Object the learner has looked at, and a more precise indication is given, as percentage of pages opened,  in the text to the left of the **Progress Bar**; the text around the percentage can be customised by the author.

{{ :playground:progress_bar_1.png?600&direct }}

If you add this property to your project, you will be presented with the following dialog.

{{ :playground:progress_bar_2.png?400&direct }}

===== Properties =====

You may modify any of the fields or selections within this dialog to customize the accessibility settings for your project, including the following.

^ Property ^ Sub-property ^ Description ^ Type ^ Additional information ^
| Position :!: **New in 3.14**  || {**Header bar (above titles) **/ Header bar (between titles) / Header bar (below titles) / Footer bar (between titles) }  | Drop-down  | Before 3.14, the Progress Bar could only be added in the footer.  |
| Include Percentage  || If this box is unticked the percentage of pages/chapters/milestones opened is not displayed, so there is only a graphic indication of progress.  | Tick box  |   |
| Percentage Text  || You can edit the text that displays with the percentage of pages/chapters/milestones opened, e.g.  'You have completed {x}% of the pages in this lesson.'  | Tick box  | Default - {x}% complete  |
| Progress Markers  | Type | {**None **/ Pages / Chapters / Milestones }  | Drop-down  | You need to have already created **Chapters **or **Milestones **in your project to use these options instead of **Pages**.  **Chapters **are created from the **Insert page** drop-down menu; **Milestones **are added as a General Optional Property at page-level.  |
| ::: | Space Evenly | Spaces the circular **Progress Markers** evenly. | Tick box | :!: Only available in the **Chapters **or **Milestones **formats |
| ::: | Navigate on Click | When enabled, the **Progress Marker** becomes a clickable link to a **Page**, **Chapter **or **Milestone**. | Tick box | :!: Only available in the **Pages**, **Chapters **or **Milestones **formats |

{{ :playground:chapters_milestones2.png?300&direct}}This is an example of what the **Project Tree** looks like after adding **Chapters** and **Milestones**. The **Milestones** are indicated by the purple pins.

You can only have Chapters __or__ Milestones displaying in the Progress Bar.  This is just an example which illustrates both formats in one image.