With Buttons Positions Sizes Colors Custom

#### Loaders with Buttons

    <button class="btn btn-info btn-lg mb-3 mr-3"><svg></svg>  Loading</button>

    <button class="btn btn-danger btn-lg mb-3 mr-3">
        <div class="spinner-border text-white mr-2 align-self-center loader-sm ">Loading...</div>
    Loading</button>

    <button class="btn btn-secondary btn-lg mb-3 mr-3">
        <div class="spinner-grow text-white mr-2 align-self-center loader-sm">Loading...</div>
    Loading</button>

#### Position

Default Button

Outline Button

    <!-- Default Button -->
    <button class="btn btn-primary btn-lg mr-3"><svg> ... </svg>Loading</button>

    <!-- Outline Button -->
    <button class="btn btn-outline-primary btn-lg mr-3">Loading <svg> ... </svg></button>

#### Sizes

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

    <div class="d-flex justify-content-between mx-5 mt-3 mb-5">
        <div class="spinner-border text-success align-self-center loader-lg">Loading...</div>
        <div class="spinner-border text-success align-self-center">Loading...</div>
        <div class="spinner-border text-success align-self-center loader-sm ">Loading...</div>
    </div>

    <div class="d-flex justify-content-between mx-5 mt-3 mb-5">
        <div class="spinner-border spinner-border-reverse align-self-center loader-lg text-secondary">Loading...</div>
        <div class="spinner-border spinner-border-reverse align-self-center text-secondary">Loading...</div>
        <div class="spinner-border spinner-border-reverse align-self-center loader-sm text-secondary">Loading...</div>
    </div>

    <div class="d-flex justify-content-between mx-5 mt-3">
        <div class="spinner-grow text-info align-self-center loader-lg">Loading...</div>
        <div class="spinner-grow text-info align-self-center">Loading...</div>
        <div class="spinner-grow text-info align-self-center loader-sm">Loading...</div>
    </div>

#### Colors

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

    <div class="d-flex justify-content-between mx-5 mt-3 mb-5">
        <div class="spinner-border text-success align-self-center ">Loading...</div>
        <div class="spinner-border text-danger align-self-center">Loading...</div>
        <div class="spinner-border text-warning align-self-center  ">Loading...</div>
        <div class="spinner-border text-primary align-self-center  ">Loading...</div>
    </div>

    <div class="d-flex justify-content-between mx-5 mt-3 mb-5">
        <div class="spinner-border spinner-border-reverse align-self-center text-dark">Loading...</div>
        <div class="spinner-border spinner-border-reverse align-self-center text-secondary">Loading...</div>
        <div class="spinner-border spinner-border-reverse align-self-center text-primary">Loading...</div>
        <div class="spinner-border spinner-border-reverse align-self-center text-danger">Loading...</div>
    </div>

    <div class="d-flex justify-content-between mx-5 mt-3 mb-5">
        <div class="spinner-grow text-info align-self-center">Loading...</div>
        <div class="spinner-grow text-danger align-self-center">Loading...</div>
        <div class="spinner-grow text-secondary align-self-center">Loading...</div>
        <div class="spinner-grow text-warning align-self-center">Loading...</div>
    </div>

#### Custom

    <div class="loader mx-auto"></div>
    <div class="loader dual-loader mx-auto"></div>
    <div class="loader multi-loader mx-auto"></div>