# Progress Bars

It has the following design:

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZfDe0ck5aCBH9aP%2Fadmire20.png?generation=1586435353682118\&alt=media)

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