bootstrap loader

1<div class="spinner-border" role="status">
2  <span class="sr-only">Loading...</span>
3</div>

1<div class="spinner-grow text-primary" role="status">
2  <span class="sr-only">Loading...</span>
3</div>
4<div class="spinner-grow text-secondary" role="status">
5  <span class="sr-only">Loading...</span>
6</div>
7<div class="spinner-grow text-success" role="status">
8  <span class="sr-only">Loading...</span>
9</div>
10<div class="spinner-grow text-danger" role="status">
11  <span class="sr-only">Loading...</span>
12</div>
13<div class="spinner-grow text-warning" role="status">
14  <span class="sr-only">Loading...</span>
15</div>
16<div class="spinner-grow text-info" role="status">
17  <span class="sr-only">Loading...</span>
18</div>
19<div class="spinner-grow text-light" role="status">
20  <span class="sr-only">Loading...</span>
21</div>
22<div class="spinner-grow text-dark" role="status">
23  <span class="sr-only">Loading...</span>
24</div>

1<div class="spinner-grow" role="status">
2  <span class="sr-only">Loading...</span>
3</div>

1<div class="d-flex align-items-center">
2  <strong>Loading...</strong>
3  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
4</div>

1<div class="text-center">
2  <div class="spinner-border" role="status">
3    <span class="sr-only">Loading...</span>
4  </div>
5</div>

1<div class="spinner-border spinner-border-sm" role="status">
2  <span class="sr-only">Loading...</span>
3</div>
4<div class="spinner-grow spinner-grow-sm" role="status">
5  <span class="sr-only">Loading...</span>
6</div>

1<button class="btn btn-primary" type="button" disabled>
2  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
3  <span class="sr-only">Loading...</span>
4</button>
5<button class="btn btn-primary" type="button" disabled>
6  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
7  Loading...
8</button>

1<div class="clearfix">
2  <div class="spinner-border float-right" role="status">
3    <span class="sr-only">Loading...</span>
4  </div>
5</div>

1σsubject = "database"(Books)
2

1<button class="btn btn-primary" type="button" disabled>
2  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
3  <span class="sr-only">Loading...</span>
4</button>
5<button class="btn btn-primary" type="button" disabled>
6  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
7  Loading...
8</button>