# Progress Bars

we have basically classified progress bars into two categories and they are Progress bars and Advanced progress bars, which in turn have the other sections . To know more about it visit the page [general\_components.html](http://new-admin.lorvent.in/general_components.html) of our template.

It has the following design:

![](https://2584671515-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJwf99HMPS1ygqn%2F-M4TuT62SoA3qHZ1oRMw%2F-M4TuWCdSvuE9SHd6AOE%2Frare6.png?generation=1586435338541137\&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 left to right.

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

4\) **animated** - sets the animation till the percentage given to attribute.

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