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

<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

<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>

Copyright © 2021 DesignReset, All rights reserved.

Coded with