# ProgressBar

### Example

![](https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2FfxcZV3D4k47CsS7oUvFz%2Fimage.png?alt=media\&token=c41339ac-5396-4759-b1ff-292a30a7ecf2)

### Settings

<table><thead><tr><th width="198.33333333333331">Setting</th><th width="150">Value</th><th>Description</th></tr></thead><tbody><tr><td>Container</td><td>false</td><td>Accepts nested children components.</td></tr><tr><td>Droppable</td><td>true</td><td>Added as a nested child component inside a container.</td></tr><tr><td>Editable</td><td>false</td><td>Can be edited</td></tr><tr><td>Interactive</td><td>false</td><td>Can receive events</td></tr></tbody></table>

### Properties

<table><thead><tr><th width="179.49923195084486">Property</th><th width="150">Type</th><th width="150">Default</th><th>Description</th></tr></thead><tbody><tr><td>Progress</td><td>Number</td><td>0</td><td>Progress (0..1)</td></tr><tr><td>Color 1</td><td>Color</td><td>#666666</td><td>Main color</td></tr><tr><td>Color 2</td><td>Color</td><td>#ffffff</td><td>Secondary color</td></tr><tr><td>Height</td><td>Dimension</td><td>5px</td><td>Height of the bar</td></tr><tr><td>Radius</td><td>Dimension</td><td>10px</td><td>Border radius</td></tr></tbody></table>

Color 1 and Color 2 will be used for the color of the growing bar and the background, being automatically selected the lighter color for the background.

### Actions

No actions defined.

### Events

No defined.