Κλωστές

Υποδείξτε την κατάσταση φόρτωσης ενός στοιχείου ή μιας σελίδας με προγράμματα περιστροφής Bootstrap, που είναι κατασκευασμένα εξ ολοκλήρου με HTML, CSS και χωρίς JavaScript.

Σε αυτήν την σελίδα

Σχετικά με

Τα "spinners" του Bootstrap μπορούν να χρησιμοποιηθούν για την εμφάνιση της κατάστασης φόρτωσης στα έργα σας. Είναι κατασκευασμένα μόνο με HTML και CSS, που σημαίνει ότι δεν χρειάζεστε JavaScript για να τα δημιουργήσετε. Ωστόσο, θα χρειαστείτε κάποια προσαρμοσμένη JavaScript για να αλλάξετε την ορατότητά τους. Η εμφάνιση, η ευθυγράμμιση και το μέγεθός τους μπορούν εύκολα να προσαρμοστούν με τις καταπληκτικές μας κατηγορίες χρησιμότητας.

Για λόγους προσβασιμότητας, κάθε φορτωτής εδώ περιλαμβάνει role="status"και ένα ένθετο <span class="visually-hidden">Loading...</span>.

Το εφέ κίνησης αυτού του στοιχείου εξαρτάται από το prefers-reduced-motionερώτημα πολυμέσων. Δείτε την ενότητα μειωμένης κίνησης της τεκμηρίωσης προσβασιμότητας .

Περιστροφικός κλώστης

Χρησιμοποιήστε τις περιστροφικές στροφές για μια ελαφριά ένδειξη φόρτωσης.

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Χρωματιστά

Η περιστροφή περιστροφής χρησιμοποιεί currentColorγια αυτό border-color, που σημαίνει ότι μπορείτε να προσαρμόσετε το χρώμα με βοηθητικά προγράμματα χρώματος κειμένου . Μπορείτε να χρησιμοποιήσετε οποιοδήποτε από τα βοηθητικά προγράμματα χρώματος κειμένου στον τυπικό κλώστη.

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Γιατί να μην χρησιμοποιήσετε border-colorβοηθητικά προγράμματα; Κάθε περιστροφή περιστροφής καθορίζει ένα transparentπερίγραμμα για τουλάχιστον μία πλευρά, επομένως τα .border-{color}βοηθητικά προγράμματα θα το παρακάμπτουν.

Καλλιέργεια κλώστη

Εάν δεν σας αρέσει η περιστροφή περιστροφής, μεταβείτε στο αναπτυσσόμενο κλώστη. Αν και δεν περιστρέφεται τεχνικά, αναπτύσσεται επανειλημμένα!

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Για άλλη μια φορά, αυτό το spinner είναι κατασκευασμένο με currentColor, ώστε να μπορείτε εύκολα να αλλάξετε την εμφάνισή του με βοηθητικά προγράμματα χρώματος κειμένου . Εδώ είναι σε μπλε, μαζί με τις υποστηριζόμενες παραλλαγές.

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Ευθυγραμμία

Τα Spinner στο Bootstrap είναι κατασκευασμένα με rems, currentColorκαι display: inline-flex. Αυτό σημαίνει ότι μπορούν εύκολα να αλλάξουν το μέγεθός τους, να ξαναχρωματιστούν και να ευθυγραμμιστούν γρήγορα.

Περιθώριο

Χρησιμοποιήστε βοηθητικά προγράμματα περιθωρίου όπως .m-5για εύκολη απόσταση.

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Τοποθέτηση

Χρησιμοποιήστε βοηθητικά προγράμματα flexbox , βοηθητικά προγράμματα float ή βοηθητικά προγράμματα στοίχισης κειμένου για να τοποθετήσετε τα spinner ακριβώς εκεί που τα χρειάζεστε σε οποιαδήποτε κατάσταση.

Καλώδιο

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Φόρτωση...

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Πλωτήρες

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Στοίχιση κειμένου

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Μέγεθος

Προσθέστε .spinner-border-smκαι .spinner-grow-smδημιουργήστε ένα μικρότερο κλώστη που μπορεί να χρησιμοποιηθεί γρήγορα σε άλλα εξαρτήματα.

<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Εναλλακτικά, χρησιμοποιήστε προσαρμοσμένα στυλ CSS ή ενσωματωμένα στυλ για να αλλάξετε τις διαστάσεις όπως απαιτείται.

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Κουμπιά

Χρησιμοποιήστε spinners μέσα σε κουμπιά για να υποδείξετε ότι μια ενέργεια βρίσκεται υπό επεξεργασία ή λαμβάνει χώρα. Μπορείτε επίσης να ανταλλάξετε το κείμενο από το στοιχείο spinner και να χρησιμοποιήσετε το κείμενο του κουμπιού όπως απαιτείται.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

Sass

Μεταβλητές

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

Βασικά καρέ

Χρησιμοποιείται για τη δημιουργία κινούμενων εικόνων CSS για τους spinners μας. Περιλαμβάνεται στο scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}