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 © 2020 DesignReset, All rights Reserved .

Coded with