# AUI Progress Bar

## Description

The AUI Progress Bar can also be a useful visual component on your page even though as a static display. However, with the ID parameter you can also change the progress via an external Javascript if you like.

<figure><img src="https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FR98gmNcc2eKo32U8zszK%2Fimage2017-11-17_19-36-2.png?alt=media&#x26;token=aa8befc9-e890-447e-94a1-2ae20a11cc3f" alt=""><figcaption></figcaption></figure>

## Adding the Macro

1. Edit your page.
2. Select “+” => Other macros
3. Type in “aui” in the Search box
4. Select the “AUI Progress Bar” macro

## Macro Options

<figure><img src="https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FqGIoBU3K7ASBRZupoYWh%2Fimage2017-11-17_19-37-6-768x468.png?alt=media&#x26;token=1235589e-8e1c-4f50-9c9f-36e2f199f546" alt=""><figcaption></figcaption></figure>

Note: The progress bar will not show in the preview section. Save the page to see the result.

### **ID**

Enter a unique ID for this object on your page. The macro is not using it though. But you can use it to address the progress bar with an external Javascript.

Using the Confluence jQuery implementation you can adjust the progress bar like this:

```javascript
AJS.progressBars.update("#my-progress-bar", 0.75);
```

### **Progress**

Enter the progress in percent here, e.g 32.

### **Width**

The progress bar will adjust its width to the parent element. It will usually expand over the width of your page. You can enter a fixed width here, e.g. 400px.

### **Height**

This parameter specifies the height of the progress bar.
