# ProgressBar

A `ProgressBar` control visually indicates operation progress.

The `Style` property determines the display style. The `ProgressBar` can only be oriented horizontally and is typically used when performing tasks such as copying files or printing documents. Using a `ProgressBar` alerts users that the application is performing a task and remains responsive.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Maximum and Minimum

The `ProgressBar` can specify custom integer values for the `Maximum` and `Minimum` properties.

![ProgressBar control showing maximum and minimum value configuration](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-36e109a7ea5785997a4e7304ede9af0fa20843fe%2Fimage.png?alt=media)

## How To

### Customize the Appearance

The `ProgressBar` control can be customized through the `Font`, `Color`, and `AppearanceKey` properties.

#### Appearance Key

The `ProgressBar` control can be customized to show any predefined theme appearance by setting the `AppearanceKey` property.

![ProgressBar demonstrating custom theme appearance changes](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-07101380240c62c2b857bee8d6bc0d7876f5700c%2FCustomProgressBar.gif?alt=media)

#### Font

Like most other controls, the `ProgressBar` control has a `Font` property that allows for customization of the size, features, and style of font.

![ProgressBar showing custom font settings](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-9b3d5ba1499ce611eeb153d6133c7bad3e9b10a3%2Fimage.png?alt=media)

#### Color

The `ProgressBar` has three color properties:

* `ForeColor`: Changes the text color
* `BackColor`: Controls the container color
* `BarColor`: Controls the color of the progress bar

![ProgressBar displaying custom color configurations](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-8064c7b33f17ae1508eb3189968dde8fa0e5701d%2Fimage.png?alt=media)

## Advanced

### JavaScript Widget

| Item             | Description                                                                                                                                                              |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Class name       | "wisej.web.ProgressBar"                                                                                                                                                  |
| Theme appearance | "progressbar", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                                                                               |
| Child components | "progress" is the container that displays the value. "label" is the progress bar's text. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model). |
| Source code      | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                                      |