Spinnerstile

Spinner oder Lader erweisen sich als nützlich, wenn der Benutzer beim Laden einer Webseite warten muss. Diese Spinner helfen dabei. Ohne diese kann der Benutzer die Seite schließen, bevor sie geladen wird. In diesem Blog wird hervorgehoben, wie Spinner mit Bootstrap 5 erstellt und gestylt werden.

So erstellen Sie Spinner mit Bootstrap 5

Zum Zweck des Erstellens eines Spinners einfach die zuweisen .Spinner Klasse zu den Elementen, in denen Sie den Spinner hinzufügen möchten.

Html

Dies ist ein Spinner

Hier setzen wir einen Spinner in einen Div -Behälter ein, der in einem anderen Div -Behälter weiter eingewickelt ist.

Ausgang

Ein Spinner wird auch als Lader bezeichnet.

Wie man bunte Spinner macht

Sie können Ihre Spinner stylen, indem Sie die in Bootstrap 5 erhältlichen Farbversorgungsklassen verwenden. Hier haben wir alle diese Klassen verwendet, um farbenfrohe Spinner zu machen

Html

Der obige Code erzeugt insgesamt 9 Spinner mit einer anderen Farbe.

Ausgang

So können Sie farbenfrohe Spinner machen.

Wie man wachsende Spinner schafft

Eine andere Möglichkeit, wie Sie Ihren Spinner stylen können, besteht darin, ihm eher einen wachsenden Effekt als einen Spinneffekt zu verleihen. Um Ihrem Spinner einen wachsenden Effekt zuzuweisen, verwenden Sie die .Spinneraugen Klasse.

Html

Wie im obigen Code -Snippet gezeigt, können Sie alle Farb -Dienstprogrammklassen zusammen mit dem verwenden .Spinner-Anstiegsklasse, um wachsende Spinner zu kreieren.

Ausgang

Ein wachsender Effekt wurde den Spinnern erfolgreich hinzugefügt.

Wie man Spinnergröße skaliert

Um einen Spinner zu machen, der kleiner ist als die Standardgröße, verwenden Sie die .Spinner-Border-SM Klasse oder wenn Sie einen kleinen wachsenden Spinner machen möchten, verwenden Sie die .Spinner-Anstiegs-SM.

Html

Der Code -Snippet erzeugt beide Arten von Spinnern, die sich drehen und wachsen und eine kleine Größe haben.

Ausgang

Die Ausgabe zeigt Spinner, die im Vergleich zur Standardgröße kleiner sind.

So fügen Sie Spinnern zu Tasten hinzu

In Situationen, in denen der Benutzer warten muss, bis die Quelle geladen werden muss, möchten wir oft Spinner zu Schaltflächen hinzufügen. So können Sie Spinner zu Tasten hinzufügen.

Html

Warten…

Im obigen Code fügt die erste Schaltfläche einen kleinen Spinner ohne Text hinzu. Der Spinner wurde erstellt, indem die relevanten Klassen dem Element zugewiesen wurden. In der Zwischenzeit fügt die zweite Schaltfläche eine kleine Wachstumschaltfläche mit Text hinzu.

Ausgang

Befolgen Sie die oben diskutierten Ansätze, die Sie verschiedenen Elementen erstellen, stylen und hinzufügen können.

Abschluss

Ein Spinner wird mit dem erstellt .Spinner Klasse, um den Spinner zu stylen .Text-Primary, .Text-Info, .Text-Success, .Textsekundär, .Text-MUTE, .Textlicht, .Textdanger, .Textdark, Und .Textwarnung. Um dem Spinner einen wachsenden Effekt zu geben, verwenden Sie die .Spinneraugen Die Klasse, um kleiner Spinner zu erstellen, verwenden Sie die .Spinner-Border-SM, oder .Spinner-Anstiegs-SM Klassen. Darüber hinaus überspannen Sie Spinner zu den Schaltflächen im Element.