====== Progress indicator area ======

The progress indicator zones are used to display on screen the progress of the pages as they scroll through the playlist.
This can be an indication of pagination with numbers (page numbering with numbers on the total number of pages), with dots, a bar or a progress circle.
These zones should be added to a page as an overlay, to partially cover all the pages in the playlist presented.

===== Procedure =====

To add a progress indicator, you first need to create a new page in the "Page" tab by clicking the button:

{{:fr:nouveau.png?100|}}

Name the page and then validate it.

Next, create a new zone by clicking the "**+**" button:
{{ :fr:ajouterunezone.png?600 |}}

In the **general properties of the zone**, choose a progress indicator.

In the zone content > type,
You have the choice of different types of indicators:

{{ :fr:exempleindicateurplaylist.png |}}

  * Current position in the playlist with numbering, indicates the number of pages in the playlist and the pagination of the current page. In this indicator, you can decide whether to display the page number, pagination, and choose the separator between the two pieces of information. You can also choose whether pagination is displayed as a counter or a countdown.
  * Current position in the playlist with dots, indicates the number of pages in the playlist using a set of dots, and the currently displayed page is highlighted by one of the dots in the list (first page, first dot, fifth page, fifth dot).
  * Playlist progress bar: displays a progress bar for the playlist (like a loading bar), and there is also a numerical counter for it that can be conditionally displayed.
  * In the playlist tab


**Create or edit the playlist for which you want to have playlist progress indications.** Then,

**click on**

{{ :fr:change-overlay-type.png?400 |}}

and then on

{{ :fr:set-overlay-source.png?600 |}}

**click on "static"** and then **"OK"** to close the modal.

Then click Save

A new button Add overlay page appears under change overlay type
{{ :fr:add_overlay.png?400 |}}
click on it, and the modal for choosing content appears
{{ :fr:modalechoixmedia.png?600 |}}
Choose your page with the playlist indicators from the list, click "OK," and then save your playlist.

**The page with the playlist indicators will automatically display on your screen over your playlist.**