Reading Progress Component

Ever seen a website where it shows you how far you have read through it’s content, by having a small progress bar somewhere? This is possible in Power Apps, through the use of a gallery and some timers.

On our canvas we have two timers:

• The first has a duration of 50ms and is set to Repeat
• The second has a duration of 250ms and is started and reset by variables

The first is running constantly in the background, waiting for changes in the VisibleIndex property of the gallery. It does this by saving the latest value to a variable every time it ends, and comparing that to the current value. The second timer starts when the first timer commands it, runs, and resets itself at the end, awaiting the next command to run.

The text content is displayed in a gallery. The gallery has double the items than it needs to display every text block – text is only displayed on even numbers. This means we have dummy rows in the gallery where the visible index will tick up or down, generating the animation.

There is a rectangle above the gallery which shows our progress. Its width is set to the following code:

With(
    {
        // segment width (how much width to add per segment scrolled past)
        Seg:Parent.Width / (RoundUp(CountRows(Gallery1.AllItems) / 2, 0) - 2),

        // multiplier to ease the transition - ratio of timer progress
        Mul:tmrAnimate.Value / tmrAnimate.Duration
    },
    With(
        {
            // start point and end point for transition
            // divide by 2 as gallery indexes for tracking occur every other item
            // the -1 means bar only shows after first item has completely scrolled past
            Stt:(RoundDown(OldIndex / 2, 0) - 1) * Seg,
            End:(RoundDown(NewIndex / 2, 0) - 1) * Seg
        },

        // calculate width
        Stt + ((End - Stt) * Mul)
    )
)

This block first defines the width of a single ‘movement’, which relates to a finished section of text content. The OldIndex and NewIndex variables are set by our first timer. These provide the start and end point for the animation. We can multiply these by our segment width to get a start and end pixel value. The last step is to work out the difference, multiply by our timer value, and add on to the start position.

As the second timer progresses, the bar will resize according to the new position. If the user scrolls quickly, the check timer will simply identify the latest position and the animation will adjust.

The icing on the cake is a colour transition to add visual feedback on progress.