Progress Bar With Canvas

Published on February 25, 2022

In this guide, we will make a progress bar without any extensions, but with a Canvas and a Clock. Here is a solution with Labels, and this is how you can use a Canvas to do the same thing.

🏷️ Tags: #tutorials-and-guides, #canvas

Blocks

Explanations

  • We have an X variable to check the progress.

  • When the screen initializes, we set some properties of components. The height of the canvas is 10 pixels, but the line width is 7, which means that we allow at least 10 - 7 = 3 pixels of space between the canvas and the components below it.

  • When the clock has refreshed, if the progress is done or nearly done, we draw a little segment of progress. Label1 is used to record the percentage of the progress bar drawn. If the progress is now done, we disable the Clock so that it is finished.

  • When Button1 is clicked, we clear the canvas, set the X variable back, set the Label1's text to 0%, and start over again.