# Overview

At the end of this tutorial you will be able to create a custom progress bar for your apps, just like the thin yellow bar that you can see scrolling across the bottom of the screen here.

## Remix this app

If you want jump straight in and get a copy of this project yourself then just click on this remix link

# 1. Increment and Show Percent

For this example the CounterLabel.Text starts at 0 and increases with each button press.

To set the width of the ProgressLabel we first calculate the percentage progress made so far. For something like a quiz this would be:

`currentQuestion ÷ totalQuestions × 100`

The result of this calculation is then rounded, and joined with the % symbol so that it can be used as the percentage progress.

Note: It would probably be a better idea to use a separate variable for the counter value, rather than the CounterLabel that I have opted for above.

# 2. Repeat?

In some cases, such as a carousel app, your user might want to move backwards as well as forwards. This is really easy to do - simply subtract 1 rather and adding one on and then perform the exact same steps to calculate and display the percentage progress.

Note: The PreviousButton Blocks are almost identical to the NextButton blocks. We can do better!

# 3. Don’t Repeat Yourself

We’ve mentioned this a few times in other tutorials and videos already, but it’s worth …eh… pointing out again; Don’t repeat yourself. Did you notice how these blocks in the previous step are identical?

Here are a couple of reasons why you shouldn’t repeat yourself:

• You code will be less efficient
• Your code will be harder to maintain and update in the future
• You code will be less efficient
• Your code will be harder to maintain and update in the future

Let’s replace the bulky, repetitive calculation with a streamlined, efficient function:

You could contain everything in a function without an output too - I’ve just chosen this approach because it suited my needs here.

A variable called `percent` is created to store the output of the calculation, then this updated value of this variable is returned by the function every time it is called.

# 5. BONUS FEATURE: “Developer Mode”

When testing this with larger numbers it was hard to see what progress - if any - was being made. To deal with the we can create a “developer mode” for our app, by creating one last variable called `debugging`. If debugging is `true` then the percentage will also be displayed in the label while testing.
Once we’re happy with the values we can set it back to `false` and out end users will just see a nice clean progress bar.

NOTE: In the animation at the top of this tutorial the numbers can be seen because this debugging mode is turned on

# Try it yourself

Click on this remix link to get a copy of this app that you can edit and use for yourself.

Hope you find this useful!

8 Likes

What a useful interface

3 Likes

What if you were trying to get the percentage of two numbers in reverse order.

For example lets say that you have \$1000 as your base number.

Then you made a \$200 payment. You would end up with \$800 or 80%.

The progress however would actually be 20%. Is there a way mathematically to do this? I’m a bit stumped.

Thanks,
Steve

Are you looking for this?

1000\$ - 100%
70\$ - X

X = 70\$ * 100% / 1000\$ = 7%

100% - 7% = 93%

2 Likes

Yes that was it!!

Thanks so much!

2 Likes

@domhnallohanlon
How did you get two labels to display on top of each other? (CounterLabel, ProgressLabel)

What am I missing?

Also as of 8/2020 these blocks don’t work, nor the link to the project.