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

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

<div class="loader‐shapes‐circle mx‐auto"></div> 
<div class="loader‐shapes‐triangle mx‐auto"></div>
<div class="loader‐shapes‐square mx‐auto"></div>
<div class="loader‐shapes‐circle‐merger mx‐auto"></div>
<div class="loader‐factory‐packaging mx‐auto"></div>
<div class="loader‐clones‐square mx‐auto"></div>