لودرها با دکمه

<button class="btn btn-info btn-lg mb-3 mr-3"><svg></svg>  لودینگ</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">لودینگ...</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">لودینگ...</div>
Loading</button>

موقعیت

دکمه پیشفرض

دکمه خارج از خط

<!-- Default Button -->
<button class="btn btn-primary btn-lg mr-3"><svg> ... </svg>لودینگ</button>

<!-- Outline Button -->
<button class="btn btn-outline-primary btn-lg mr-3">لودینگ <svg> ... </svg></button>

اندازه ها

<div class="d-flex justify-content-between mx-5 mt-3 mb-5">
    <div class="spinner-border text-success align-self-center loader-lg">لودینگ</div>
    <div class="spinner-border text-success align-self-center">لودینگ</div>
    <div class="spinner-border text-success align-self-center loader-sm">لودینگ...</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">لودینگ</div>
    <div class="spinner-border spinner-border-reverse align-self-center text-secondary">لودینگ</div>
    <div class="spinner-border spinner-border-reverse align-self-center loader-sm text-secondary">لودینگ</div>
</div>

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

رنگها

<div class="d-flex justify-content-between mx-5 mt-3 mb-5">
    <div class="spinner-border text-success align-self-center ">لودینگ</div>
    <div class="spinner-border text-danger align-self-center">لودینگ</div>
    <div class="spinner-border text-warning align-self-center  ">لودینگ</div>
    <div class="spinner-border text-primary align-self-center  ">لودینگ</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">لودینگ</div>
    <div class="spinner-border spinner-border-reverse align-self-center text-secondary">لودینگ</div>
    <div class="spinner-border spinner-border-reverse align-self-center text-primary">لودینگ</div>
    <div class="spinner-border spinner-border-reverse align-self-center text-danger">لودینگ</div>
</div>

<div class="d-flex justify-content-between mx-5 mt-3 mb-5">
    <div class="spinner-grow text-info align-self-center">لودینگ</div>
    <div class="spinner-grow text-danger align-self-center">لودینگ</div>
    <div class="spinner-grow text-secondary align-self-center">لودینگ</div>
    <div class="spinner-grow text-warning align-self-center">لودینگ</div>
</div>

سفارشی

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

© کپی رایت

بومی سازی شده توسط : ایمان پاکروح