Progress Bar

This article describes the Progress Bar component and its properties.

Squirrel 1.12 introduced a “Quick Set-up” tab on many property panels. The properties described on this page are available on the “All Properties” tab of the property panel. For more details on “Quick Set-Up” properties see this article

The Progress Bar allows a value to be displayed in a “thermometer” format:

Select Progress Bar from the DataViz category of the component library. Move the mouse over the canvas and click to add the component to your project:

Progress Bar Properties

The Progress Bar properties are organized into GENERAL, STYLING and DYNAMIC VISIBILITY drawers. This guide will describe the general and styling properties; the dynamic visibility properties are generic and a separate guide and tutorial on Dynamic Visibility can be found here.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set Property Values article for more information on using the different methods.

GENERAL:

• Orientation – this property sets the progress bar to either display vertically or horizontally.

• Value – this is the value displayed, it must be bound to a single cell in the spreadsheet.

• Number Format / Decimal places – these properties control the format used to display the value

• Min / Max – these properties set the upper and lower bounds for the progress bar.

STYLING:

The appearance of the Progress Bar can be altered to suit a theme or particular style by using the STYLING properties, these are in two sections:

TRACK

• Thickness – controls the overall width of the progress bar

• Track Colour / Opacity – control the color and opacity of the progress bar’s main track

• Border – these properties control whether a border is visible and if it is, its color, opacity, and width

• Progress Bar

  • Color / Opacity – control the color and opacity of the progress bar’s indicator

  • Corner – controls the extent of the rounding at the end of both the progress bar’s main track and its indicator

VALUE

By default the progress bar displays a numerical value alongside the track, this can be switched off by de-selecting the checkbox at the top right of the “Value” section of the styling drawer.

• Font Size – controls the font used to display the value

• Text Colour / Opacity – control the color and the opacity of the value