How to achieve loading effect in Bootstrap? Read the icon (Spinners) component-Bootstrap Tutorial-php.cn

How to achieve loading effect in Bootstrap? Read the icon (Spinners) component

青灯夜游

Release： 2021-12-27 19:31:34

forward

4189 people have browsed it

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!

How to achieve loading effect in Bootstrap? Read the icon (Spinners) component

1 Simple read icon

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>

Copy after login

2 Color

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>

Copy after login

3 Gradient reading icon

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>

Copy after login

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>

Copy after login

4 Margins

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>

Copy after login

5 Alignment

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>

Copy after login

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>

Copy after login

##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>

Copy after login

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>

Copy after login

6 Size

Add spinner-border-sm and spinner-grow-sm to make a smaller read icon so that it can be used quickly in other components.

<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 after login

Show larger icon

<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>

Copy after login

7 Button

Use read inside button The icon indicates that it is currently being processed or an operation is in progress. You can also use button text to change the text of the read icon according to your needs.

<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 after login

<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 after login

1How to achieve loading effect in Bootstrap? Read the icon (Spinners) component

For more knowledge about bootstrap, please visit:

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!