Κλωστές
Υποδείξτε την κατάσταση φόρτωσης ενός στοιχείου ή μιας σελίδας με προγράμματα περιστροφής 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 είναι κατασκευασμένα με rem
s, 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;
}
}