# 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](/files/-LE9sLEuGgjuN8f0ac1x)

```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

![](/files/-LE9sS1r4Y_dLIJksVf3)

```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

![](/files/-LE9sixoXPCE5vsNoT0T)

```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](/files/-LE9smaJyepFirbNnXlE)

```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

![](/files/-LE9ssa1tJmvlhKU2phc)

```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>

![](/files/-LE9szZWEiPauzxbzGMe)

```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"`

![](/files/-LE9t0JoLivEQx5NBqJv)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.pages.revox.io/ui-elements/progressbar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.