博客

bootstrap加loading

  • Post category:other

Bootstrap 加载动画攻略

Bootstrap 是一个流行的前端框架，提供了许多有用的组件和工具，其中包括加载动画。在本攻略中，我们详细介绍如何使用 Bootstrap 加载动画，包括如何使用内置的加载动画和如何自定义加载动画。

步骤1：引入 Bootstrap

在使用 Bootstrap 加载动画之前，需要先引入 Bootstrap。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 加载动画</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

在上面的示例中，我们使用CDN引入了Bootstrap的CSS和JavaScript文件。在HTML中，我们将页面的内容放置在<body>元素中。

步骤2：使用内置的加载动画

Bootstrap 提供了许多内置的加载动画，可以轻松地在页面中使用。以下是一些常用的置加载动画：

旋转动画

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

脉冲动画

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

在上面的示例中，我们使用了.spinner-border和.spinner-grow类来创建旋转动画和脉冲动画。在HTML中，我们使用<div>元素来创建加载动画，并将其放置在页面中。

步骤3：自定义加载动画

如果内置的加载动画不能满足您的需求，您可以使用 Bootstrap 的自定义加载动画。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 自定义加载动画</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
  <style>
    /* 自定义加载动画 */
    .lds-ring {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
    }
    .lds-ring div {
      box-sizing: border-box;
      display: block;
      position: absolute;
      width: 64px;
      height: 64px;
      margin: 8px;
      border: 8px solid #fff;
      border-radius: 50%;
      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      border-color: #fff transparent transparent transparent;
    }
    .lds-ring div:nth-child(1) {
      animation-delay: -0.45s;
    }
    .lds-ring div:nth-child(2) {
      animation-delay: -0.3s;
    }
    .lds-ring div:nth-child(3) {
      animation-delay: -0.15s;
    }
    @keyframes lds-ring {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</body</html>

在上面的示例中，我们使用CSS来创建自定义加载动画。在CSS中，我们定义了.lds-ring类来设置加载动画的宽度、高度和位置。在.lds-ring div规则中，我们设置加载动画的边框、边框半径、动画和边框颜色。在@keyframes规则中，我们定义了动画的关键帧。在HTML中，我们使用<div>元素来创建加载动画，并将其放置在页面中。

示例1：使用内置的加载动画

以下是一个使用内置的加载动画的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 加载动画</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="d-flex justify-content-center">
    <div class="spinner-border" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
</body>
</html>

在上面的示例中，我们使用了.d-flex和.justify-content-center类来将加载动画居中。在中，我们使用<div>元素来创建加载动画，并将其放置在页面中。

示例2：自定义加载动画

以下是一个自定义加载动画的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 自定义加载动画</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
  <style>
    /* 自定义加载动画 */
    .lds-ring {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
    }
    .lds-ring div {
      box-sizing: border-box;
      display: block;
      position: absolute;
      width: 64px;
      height: 64px;
      margin: 8px;
      border: 8px solid #fff;
      border-radius: 50%;
      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      border-color: #fff transparent transparent transparent;
    }
    .lds-ring div:nth-child(1) {
      animation-delay: -0.45s;
    }
    .lds-ring div:nth-child(2) {
      animation-delay: -0.3s;
    }
    .lds-ring div:nth-child(3) {
      animation-delay: -0.15s;
    }
    @keyframes lds-ring {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="d-flex justify-content-center">
    <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
  </div>
</body>
</html>

在上面的示例中，我们使用CSS来创建自定义加载动画。在CSS中，我们定义了.lds-ring类来设置加载动画的宽度、高度和位置。在.lds-ring div规则中，我们设置加载动画的边框、边框半径、动画和边框颜色。在@keyframes规则中，我们定义动画的关键帧。在HTML中，我们使用<div>元素来创建加载动画，并将其放置在页面中。

结论

通过以上步骤和示例，我们了解了如何使用 Bootstrap 加载动画，包括如何使用内置的加载动画和如何自定义加载动画。在实际应用中，可以根据实际需求选择适当的加载动画，提高用户体验。

Tags: