Style spinner

Spinnerów lub ładowarek okazują się przydatne, gdy użytkownik musi poczekać podczas ładowania strony internetowej. Spinnerów pomagają zachować ruch witryny w tym okresie oczekiwania, ponieważ poinformują użytkownika, że ​​strona zostanie wkrótce załadowana. Bez nich użytkownik może zamknąć stronę, zanim się załaduje. Ten blog podkreśla, w jaki sposób tworzone i stylizowane są spinnerów za pomocą Bootstrap 5.

Jak tworzyć spinnerów za pomocą Bootstrap 5

W celu utworzenia spinnera po prostu przypisz .Spinner-Border klasa do elementów, w których chcesz dodać spinner.

Html

To jest spinner

Tutaj wkładamy spinner do kontenera Div, który jest dalej owinięty w innym pojemniku Div.

Wyjście

Spinner nazywany jest również ładowarką.

Jak zrobić kolorowe spinner

Możesz stylizować swoje spinner, korzystając z klas kolorowych dostępnych w Bootstrap 5. Tutaj użyliśmy wszystkich tych klas, aby stworzyć kolorowe spinner

Html

Powyższy kod wygeneruje w sumie 9 spinnerów z innym kolorem.

Wyjście

W ten sposób możesz zrobić kolorowe spinner.

Jak tworzyć rosnące spinner

Innym sposobem stylizowania swojego spinnera jest nadanie jej rosnącego efektu, a nie efekt wirowania. Aby przypisać swojego spinnera, rosnący efekt Użyj .Spinner klasa.

Html

Jak pokazano w powyższym fragmencie kodu, możesz użyć wszystkich klas narzędziowych wraz z .Klasa spinnerów, aby stworzyć rosnące spinner.

Wyjście

Rosnące efekt został pomyślnie dodany do spinnerów.

Jak skalować rozmiar spinnera

W celu stworzenia spinnera, który jest mniejszy niż domyślny rozmiar .Spinner-Border-SM klasa lub jeśli chcesz zrobić mały rosnący spinner, użyj .Spinner-Brow-SM.

Html

Snippet kodowy wygeneruje oba rodzaje spinnerów, które wirują i rosną, mając niewielki rozmiar.

Wyjście

Wyjście pokazuje spinnerów o mniejszym rozmiarze w porównaniu z domyślnym rozmiarem.

Jak dodać spinner do przycisków

Często chcemy dodać spinner do przycisków w sytuacjach, gdy użytkownik musi poczekać, aż źródło załaduje się po kliknięciu przycisku. Oto, jak możesz dodać spinner do przycisków.

Html

Czekać…

W powyższym kodzie pierwszy przycisk dodaje małe rozmiar spinner bez tekstu. Spinner został utworzony przez przypisanie odpowiednich klas do elementu. Tymczasem drugi przycisk dodaje mały przycisk uprawy z tekstem.

Wyjście

Po omówionych powyżej podejść możesz tworzyć, stylizować i dodawać spinnerów do różnych elementów.

Wniosek

Spinner jest tworzony za pomocą .Spinner-Border klasa, w międzyczasie, aby stylizować spinner, możesz użyć różnych dostępnych klas tekstu, które są .PROMARY TEKST, .tekst-info, .Sukcencja tekstu, .tekst-sekundowy, .Zmiana tekstu, .Light tekstowy, .Niebezpieczeństwo tekstowe, .tekst, I .Warnowanie tekstowe. Aby zapewnić spinnerze rosnący efekt, użyj .Spinner Co więcej, aby stworzyć małe rozmiar spinner .Spinner-Border-SM, Lub .Spinner-Brow-SM zajęcia. Ponadto, aby dodać spinnerów do przycisków, obejmuje je wewnątrz elementu.