# Progress

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-fbc9ac3be8ca0b6a2130aa8c3a6a993d6b64b401%2Fimage%20(414).png?alt=media" alt=""><figcaption></figcaption></figure>

## Basic

#### Value

Sets the progress of the widget. Progress should be an integer between 0 and 100.

## Interaction

#### Disabled

Disables the user interaction with the element on the page. It visually indicates that the element is inactive and prevents users from interacting with it when applied.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-695f356d5e8bc58072102f50922157508eb6122b%2Fimage%20(224).png?alt=media" alt=""><figcaption><p>Read-only</p></figcaption></figure>

#### Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-4aaa812d0b623487c085a616219a4515138079fb%2Fimage%20(211).png?alt=media" alt="" width="338"><figcaption><p>Set the visibility</p></figcaption></figure>

#### Show Value

Decide whether to show the progress percentage number at the end of the bar, along with the filling up the progress.

## Style

<table><thead><tr><th width="218" align="center">Property</th><th>Description</th></tr></thead><tbody><tr><td align="center">Text</td><td>Set the colour of the title text. Recommended to set in contrast with the background.</td></tr><tr><td align="center">Text Size</td><td>Set the size of the text in px value - 12px</td></tr><tr><td align="center">Text Weight</td><td>Increase or decrease the thickness of the font using the list of numbers from 100-800.</td></tr><tr><td align="center">Font Family</td><td>Type the name of the font family. The reference to the list of font families can be found here: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family">MDN web docs</a></td></tr><tr><td align="center">Font Style</td><td>There are 3 types of styles that can be applied:<br>"normal" - The text is shown normally, no style applied.<br>"italic" - The text is cursive.<br>"oblique" - A sloped version of the normal text.</td></tr><tr><td align="center">Margin</td><td>This value is set in terms of "px" number which creates the space between the border and the content of the widget.</td></tr><tr><td align="center">Padding</td><td>This value is set in terms of "px" number which creates the space between the border and outer elements.</td></tr><tr><td align="center">Track</td><td>Set the colour for the circle bar, before the progress starts to fill.</td></tr><tr><td align="center">Fill</td><td>Set the colour for the circle bar to fill the progress.</td></tr><tr><td align="center">Success</td><td>The colour for the widget circle bar to show the success symbol.</td></tr></tbody></table>
