Spinners & Progress

Indicate loading states and progress with Bootstrap spinners and progress bars.

Border Spinners

<div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

Growing Spinners

<div class="spinner-grow" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

Colored Spinners

<div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

Growing Spinners - Colored

<div class="spinner-grow text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

Sizes

Small Spinners

<div class="spinner-border spinner-border-sm" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

Custom Size

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

Button Spinners

<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm me-2" role="status"></span>
    Loading...
</button>

Icon Only Buttons

<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm" role="status"></span>
    <span class="visually-hidden">Loading...</span>
</button>

Progress Bars

Basic Progress

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 25%"></div>
</div>

With Labels

25%
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 25%">25%</div>
</div>

Height

<div class="progress" style="height: 20px;">
    <div class="progress-bar" role="progressbar" style="width: 50%"></div>
</div>

Colored Progress Bars

<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 25%"></div>
</div>

Multiple Bars

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%"></div>
</div>

Animated Progress Bars

Striped

<div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 25%"></div>
</div>

Striped Animated

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated"
         role="progressbar" style="width: 50%"></div>
</div>