Home > Article > Web Front-end > How to achieve loading effect in Bootstrap? Read the icon (Spinners) component

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

青灯夜游forward: 2021-12-10 19:18:184163browse

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!

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>

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

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>

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

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>

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

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>

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

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>

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

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>

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

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>

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

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

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

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>

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

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>

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

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>

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

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>

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

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

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!

JavaScript css bootstrap html Float margin border flex

Statement：

This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete

Previous article：Share 15 free Bootstrap5 custom component generators to improve development speed!Next article：Share 15 free Bootstrap5 custom component generators to improve development speed!

See more

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

1 Simple read icon

2 Color

3 Gradient reading icon

4 Margins

5 Alignment

Related articles