要建立加載中效果可以使用 .spinner-border 類:
<div class="spinner-border"></div>
可以使用文本顔色類設定不同的顔色：
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
使用 .spinner-grow 類來設定閃爍的加載效果:
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
使用.spinner-border-sm 或 .spinner-grow-sm 類來建立加載效果的大小:
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
我們也可以設定一個正在加載的按鈕。
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
Loading..
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>