This is the 29th day of my participation in Gwen Challenge
“Bootstrap5 zero foundation to master” my old liu original, strive to update a section every day. originally
29.1 Simple Icon Reading
Use Bootstrap to read ICONS to indicate the loading status of components. These loading ICONS use HTML, CSS, and no JavaScript. Their appearance, alignment, and size can all be customized with generic classes, but you still need custom JavaScript to switch their presentation.
Here is a simple read icon
<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > read icon < / title > < / head > < body > < div class =" container "> <br><br><br><br> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading... </span> </div> </div> </body> </html>Copy the code
29.2 color
The border read 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 generic category on the standard read icon.
<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>
Copy the code
29.3 Gradient Reading Icon
If you don’t like the border read icon, you can switch to the gradient read icon. Although technically it doesn’t rotate, it will gradually appear over and over again! Gradient ICONS also support different colors.
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Copy the code
As above, the read icon also uses currentColor, so you can easily change its appearance by using the text color generic category. This is blue, and the color changes it supports.
<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>
Copy the code
29.4 margin
Use Margin Utilities to simply increase the spacing as m-5 does.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Copy the code
29.5 Alignment Method
Use flexbox Generic categories, Float generic categories, or text typography to place read ICONS exactly where you want them in any case.
29.5.1 Flex
Here is the center alignment
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Copy the code
Aligned on the right
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
Copy the code
29.5.2 Float
Float implementation is aligned to the right
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Copy the code29.5.3 Text generic classes
The text generic class implements center alignment
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Copy the code
29.6 size
Add spiner-border-SM and spiner-grow-sm to make a smaller read icon that can be used quickly in other widgets.
<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>
Copy the code
Displays a larger icon
<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>
Copy the code
29.7 the button
Using a read icon inside a button indicates that an action is currently being processed or in progress. You can also change the text of the read icon using button Text as required.
<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>
Copy the code
<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>
Copy the code
That’s all for today. Please pay attention to me, timely learning my old Liu original “Bootstrap5 zero foundation to master” section 30 Bootstrap5 Progress bar component usage.
If this article is helpful, please feel free to like it!