Λειτουργοί Φόρτωσης Bootstrap 5

Φορτωτής

Για να δημιουργήσετε γυροστροφητή/φορτωτή, χρησιμοποιήστε .γυροστροφητής-περιθώριο Κλάση:

Παράδειγμα

<div class="γυροστροφητής-περιθώριο κειμένου"></div>

Δοκιμάστε το προσωπικά

Χρωματιστοί φορτωτές

Χρησιμοποιήστε οποιαδήποτε χρωματική κλίμακα utilities για να προσθέσετε χρώμα στον γυροστροφητή:

Παράδειγμα

<div class="γυροστροφητής-περιθώριο κειμένου"></div>
<div class="γυροστροφητής-περιθώριο κειμένου"></div>
<div class="γυροστροφητής-περιθώριο κειμένου"></div>
<div class="γυροστροφητής-περιθώριο κειμένου"></div>
<div class="γυροστροφητής-περιθώριο κειμένου"></div>
<div class="γυροστροφητής-περιθώριο κειμένου"></div>
<div class="γυροστροφητής-περιθώριο κειμένου"></div>
<div class="γυροστροφητής-περιθώριο κειμένου"></div>
<div class="γυροστροφητής-περιθώριο κειμένου"></div>

Δοκιμάστε το προσωπικά

Αύξηση φορτωτής

Αν θέλετε ο γυροστροφητής/φορτωτής να αυξηθεί αντί για "γυροστροφή", χρησιμοποιήστε .γυροστροφητής-αύξησης Κλάση:

Παράδειγμα

<div class="γυροστροφητής-αύξησης κειμένου"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>

Δοκιμάστε το προσωπικά

Μέγεθος φορτιστή

Χρησιμοποιήστε .spinner-border-sm ή .spinner-grow-sm Δημιουργία μικρότερου φορτιστή:

Παράδειγμα

<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>

Δοκιμάστε το προσωπικά

Κουμπί φορτιστή

Μπορείτε επίσης να προσθέσετε έναν φορτιστή στο κουμπί, αν έχει ή όχι κείμενο:

Παράδειγμα

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Φόρτωση...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Φόρτωση...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Φόρτωση...
</button>

Δοκιμάστε το προσωπικά