> For the complete documentation index, see [llms.txt](https://docs.pages.revox.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pages.revox.io/ui-elements/progressbar.md).

# Progressbar

## **Linear Progress**

### **Indeterminate progress**

Indicates a running process where the progress is unknown using an animated svg. ex: AJAX form submission. Simply wrap `.progress-bar-indeterminate` with Bootstrap's `.progress`. The progress bar will automatically expand to get the width of its parent `<div>`

![Animation in progress](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-LE9sJPCZUJ4fG2CHKUL%2F-LE9sLEuGgjuN8f0ac1x%2FScreen%20Shot%202018-06-04%20at%206.28.57%20PM.png?alt=media\&token=62d12a5b-eaa1-4e8c-b20f-96448fad26f7)

```markup
<div style="width:50%">
    <div class="progress">
        <div class="progress-bar-indeterminate"></div>
    </div>
    </div>
</div>
```

#### **Color options**

In addition to Bootstrap's contextual progress bar classes, Pages has introduced two new classes, `.progress-bar-success`and `.progress-bar-complete` if you want to add more color to your project

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-LE9sJPCZUJ4fG2CHKUL%2F-LE9sS1r4Y_dLIJksVf3%2FScreen%20Shot%202018-06-04%20at%206.29.33%20PM.png?alt=media\&token=f2af7a7d-3466-47b1-89ed-a24f944153fe)

```markup
<div style="width:50%">
    <div class="progress">
        <div class="progress-bar progress-bar-primary" style="width: 35%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-complete" style="width: 45%;"></div>
    </div>
</div>
```

**Size options**

Append `.progress-small` to `.progress` to make the progress bars thinner than the usual height

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-LE9sJPCZUJ4fG2CHKUL%2F-LE9sixoXPCE5vsNoT0T%2FScreen%20Shot%202018-06-04%20at%206.29.54%20PM.png?alt=media\&token=b8f5a17d-18c5-4663-933c-4be86e23c07c)

```markup
<div style="width:50%">
    <!-- Thinner progress bar -->
    <div class="progress progress-small">
        <div style="width: 45%;" class="progress-bar progress-bar-success"></div>
    </div>
    <!-- Default height -->
    <div class="progress">
        <div style="width: 45%;" class="progress-bar progress-bar-success"></div>
    </div>
</div>
```

## **Circular Progress**

Don't like the linear style? Try circular progress indicators instead. These also come with determinate and inderminate options

### **Indeterminate progress**

![Animation in progress](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-LE9sJPCZUJ4fG2CHKUL%2F-LE9smaJyepFirbNnXlE%2FScreen%20Shot%202018-06-04%20at%206.30.02%20PM.png?alt=media\&token=d46f0478-680e-45e0-ba12-58cf79ffc0f1)

```markup
<div class="progress-circle-indeterminate"></div>
```

### **Determinate progress**

A determinate circular progress indicator can be initialized without writing a single line of Javascript code by simply including markup below. Pass any percentage value (0-100) into the `value` field to set the progress

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-LE9sJPCZUJ4fG2CHKUL%2F-LE9ssa1tJmvlhKU2phc%2FScreen%20Shot%202018-06-04%20at%206.30.14%20PM.png?alt=media\&token=4095a75e-fb6b-4d34-bdc1-de7e84417948)

```markup
<!-- Show 75% of progress -->
<input class="progress-circle" data-pages-progress="circle" value="75" type="hidden" data-color="complete">
```

**Color options**

Color options can be set using the `data-color` attribute. Any contextual color can be included.<br>

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-LE9sJPCZUJ4fG2CHKUL%2F-LE9szZWEiPauzxbzGMe%2FScreen%20Shot%202018-06-04%20at%206.30.21%20PM.png?alt=media\&token=eb66c149-0170-4d4b-a933-e76351ac210a)

```markup
<input class="progress-circle" data-pages-progress="circle" value="45" type="hidden" data-color="complete">
<input class="progress-circle" data-pages-progress="circle" value="65" type="hidden" data-color="primary">
<input class="progress-circle" data-pages-progress="circle" value="75" type="hidden" data-color="success">
```

**Size options**

Stroke of the circle can be made thicker by setting `data-thick="true"`

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-LE9sJPCZUJ4fG2CHKUL%2F-LE9t0JoLivEQx5NBqJv%2FScreen%20Shot%202018-06-04%20at%206.30.28%20PM.png?alt=media\&token=cd164b24-2fc0-4a54-bc31-f8137b65d4c2)

```markup
<input class="progress-circle" data-pages-progress="circle" value="75" type="hidden" data-thick="true">
```