How to achieve loading effect in
Bootstrap? The following article will introduce to you how to use the Bootstrap5 read icon (Spinners) component to see how to read the icon to indicate the component loading status. I hope it will be helpful to you!
Use Bootstrap to read icons to indicate the component loading status. These read icons completely use HTML, CSS, and no JavaScript is used. Their appearance, alignment, and size can be customized through common classes, but you still need custom JavaScript to toggle their display. [Related recommendations: "bootstrap tutorial"]
The following is a simple read icon
<!doctype html>
<html>
<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>读取图标</title>
</head>
<body>
<div>
<br><br><br><br>
<div role="status">
<span>Loading...</span>
</div>
</div>
</body>
</html>The border reading icon uses currentColor as its border-color, which means you can use the text color general category to customize its color. You can use colors from any common 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>
If you don’t like the border reading icon, you can switch to the gradient reading icon. While technically it doesn't rotate, it does fade over and over again! Gradient icons also support different colors.
<div class="spinner-grow" role="status"> <span class="visually-hidden">Loading...</span> </div>
Same as above, this read icon also uses currentColor, so you can easily change its appearance using the text color universal category. Over here is blue, and the color variations 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>
Use margin utilities to simply increase the spacing like m-5.
<div class="spinner-border m-5" role="status"> <span class="visually-hidden">Loading...</span> </div>
Use flexbox general category, float general category, or text layout to accurately position the read icon in any case Place it where you need it.
5.1 Flex
The following is centered alignment
<div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
Align right
<div class="d-flex align-items-center"> <strong>Loading...</strong> <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div> </div>
##5.2 Float
Floating implementation of right alignment<div class="clearfix"> <div class="spinner-border float-end" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
5.3 Text general class
Text general class implements center alignment<div class="text-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
<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>
<div class="spinner-border" style="max-width:90%" 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>
<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>
bootstrap basic tutorial! !
The above is the detailed content of How to achieve loading effect in Bootstrap? Read the icon (Spinners) component. For more information, please follow other related articles on the PHP Chinese website!
How to open Computer Network and Sharing Center
What is the shortcut key for copying and pasting ctrl?
The difference between arrow functions and ordinary functions
Android desktop software recommendations
absolutelayout
Mongodb and mysql are easy to use and recommended
940mx graphics card
What are the classifications of linux systems?
 component "163913466050885How to achieve loading effect in Bootstrap? Read the icon (Spinners) component")
 component "163913466620244How to achieve loading effect in Bootstrap? Read the icon (Spinners) component")
 component "163913467239610How to achieve loading effect in Bootstrap? Read the icon (Spinners) component")
 component "163913467758018How to achieve loading effect in Bootstrap? Read the icon (Spinners) component")
 component "163913468163927How to achieve loading effect in Bootstrap? Read the icon (Spinners) component")
 component "163913468664185How to achieve loading effect in Bootstrap? Read the icon (Spinners) component")
 component "163913468913696How to achieve loading effect in Bootstrap? Read the icon (Spinners) component")
 component "163913469457450How to achieve loading effect in Bootstrap? Read the icon (Spinners) component")
 component "163913469981221How to achieve loading effect in Bootstrap? Read the icon (Spinners) component")
 component "163913470394754How to achieve loading effect in Bootstrap? Read the icon (Spinners) component")
 component "163913470774160How to achieve loading effect in Bootstrap? Read the icon (Spinners) component")
 component "163913471279683How to achieve loading effect in Bootstrap? Read the icon (Spinners) component")
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
