> For the complete documentation index, see [llms.txt](https://lorvent.gitbook.io/admire/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lorvent.gitbook.io/admire/html/html-structure/main-content/progress-bars.md).

# Progress Bars

It has the following design:

![](/files/-M4TuZfDe0ck5aCBH9aP)

**Horizontal Progress Bar**

```
<div class="progress">
    <div class="progress-bar" style="width: 70%;">Content</div>
</div>
```

***parameters:***

**1) Background color** - sets the color of the background. Can take values - progress-info, progress-success, progress-warning, progress-danger.

```
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 70%;">Content</div>
</div>
```

**2) striped** - uses a gradient to create a striped effect.

```
<div class="progress progress-striped">
   <div class="progress-bar" style="width: 70%;">Content</div>
</div>
```

**3) animated striped** - add`.active`to`.progress-striped`to animate the stripes right to left.

```
<div class="progress progress-striped active">
    <div class="progress-bar" style="width: 70%;">Content</div>
</div>
```

4\) **animated** - sets the animation by adding the attribute`data-appear-progress-animation.`

```
<div class="progress" data-appear-progress-animation="70%">
   <div class="progress-bar">Content</div>
</div>
```