Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to realize the loading effect in Bootstrap". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the idea of Xiaobian to study and learn "how to realize the loading effect in Bootstrap" together.

1 Simple reading icon

Use Bootstrap to read icons to indicate component loading status. These read icons use HTML, CSS, and no JavaScript. Their appearance, alignment, and size can all be customized through generic classes, but you still need custom JavaScript to toggle their display.

Here is a simple read icon

read icon

Loading... 2 color

The border reading icon uses currentColor as its border-color, which means you can customize its color using the text color generic category. You can use any color in the general category on the standard read icon.

Loading... Loading... Loading... Loading... Loading... Loading... Loading... Loading... 3 Gradient Reading Illustration

If you don't like the border reading icon, you can switch to the gradient reading icon. Although technically it doesn't rotate, it does appear to fade repeatedly! Gradient icons also support different colors.

Loading...

As above, this read icon also uses currentColor, so you can easily change its appearance using the text color generic category. And here's blue, and the color variations it supports.

Loading... Loading... Loading... Loading... Loading... Loading... Loading... Loading... 4 margins

Use margin utilities to simply increase spacing like m-5.

Loading... 5 Alignment

Use flexbox generic categories, float generic categories, or text typesetting to place the reading icon exactly where you want it in any case.

5.1 Flex

The following is the center alignment

Loading...

Right alignment

Loading...

5.2 Float

float to achieve right alignment

Loading...

5.3 Text Universal Class

Text Common Class Center Alignment

Loading... 6 Size

Adding spinner-border-sm and spinner-grow-sm makes a smaller read icon that can be used quickly in other components.

Loading... Loading...

Show larger icons

Loading... Loading... 7-button

Using the read icon inside the button indicates that the process is currently in progress or that an operation is in progress. You can also use button text to change the text of the read icon as needed.

Loading... Loading... Loading... Loading... Thank you for reading, the above is "how to achieve the loading effect in Bootstrap" content, after the study of this article, I believe that we have a deeper understanding of how to achieve the loading effect in Bootstrap, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.