# Progress

You can add the component on any page in the template. You need to follow the steps given below:&#x20;

**Step 1:** Please add the code given below in the page where you want to add the component.

```
<CircularProgress className="w-10 mr-30 mb-10 progress-primary" thickness={2.5} />	
```

**Step 2:** Now Import the component from its parent library.

```
import CircularProgress from '@material-ui/core/CircularProgress';
```

We have given you an example of adding a circular progress bottom start on the Ecommerce Dashboard.

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-Lbwg9fppjOWdgXHEgIf%2F-LbwiDZU6M-4UVgk11hF%2FSelection_043.png?alt=media\&token=8bb23418-518e-439f-94bb-69d2334696fa)

You can check some other layouts of progress below. For adding any of the below layout in the template, please check their relative code in the `src->routes->components->progress->components` folder.

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbvP11UgKU4MlVzPa8h%2F-LbvTa0PgLPNf_QvfucQ%2FScreenshot%202019-04-08%20at%2011.14.30%20AM.png?alt=media\&token=118e63d6-8993-4fa4-9236-b41a2f91c3ed)
