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