# \<progress>

```html
<widget>
  <progress value="33%"/>
</widget>
```

The `<progress>` element defines a progress bar made up of a collection of stack elements. It is a self-closing tag, meaning you do not need a second closing tag but it must be marked with a forwardslash at the end.

### **File**

[html-widget-progress.js](https://github.com/Normal-Tangerine8609/Scriptable-HTML-Widget/blob/main/add-ons/html-widget-progress.js)

### **Attributes**

**background - colour or gradient**

Defines the background.

**progressBackground - colour or gradient**

Defines the filled progress background.

**borderColor - colour**

Defines the border color.

**borderWidth - posInt**

Defines the border width.

**cornerRadius - posInt**

Defines the corner radius.

**progressCornerRadius - posInt**

Defines the filled progress corner radius.

**width - posInt**

Defines the width. The default width is `100`.

**height - posInt**

Defines the height. The default height is `1`.

**url - url**

Defines the progress bar url.

**value - decimal**

Defines the value (amount of progress) for the progress bar. `value` is not supported through css and is defaulted at `0`.