Light-Year-Admin-Using-Iframe-v5
/
lyear_components_spinners.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>加载状态 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>

<body>
<div class="container-fluid">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">加载状态</div></header>
        <div class="card-body">

          <p>Bootstrap的“spinners”可用于显示项目中的加载状态。它们只使用HTML和CSS构建，这意味着您不需要任何JavaScript来创建它们。但是，您需要一些自定义JavaScript来切换它们的可见性。它们的外观、对齐和大小可以通过我们令人惊叹的实用程序类轻松定制。</p>
          <p>为了便于访问，这里的每个加载程序都包括 <code>role=“status"</code> 和嵌套的 <code>&lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;</code>。</p>
          <div class="border-example">
            <div class="spinner-border" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;</pre>
          <h6 class="mt-3">颜色</h6>
          <p>你可以使用 <code>.text-primary</code> 等这样的文本颜色来定义加载动画的颜色。</p>
          <div class="border-example">
            <div class="spinner-border text-primary" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-secondary" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-success" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-danger" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-warning" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-info" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-light" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-dark" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border text-primary" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-secondary" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-success" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-danger" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-warning" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-info" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-light" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-dark" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;</pre>
          <div class="callout callout-info mt-3">为什么不使用 <code>border-color</code> 工具？每个旋转动画至少为一侧指定一个透明边框，因此 <code>.border-{color}</code> 工具将覆盖该边框。</div>

          <h6 class="mt-3">渐变增长式的加载</h6>
          <div class="border-example">
            <div class="spinner-grow" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-grow" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;</pre>
          <h6>颜色</h6>
          <div class="border-example">
            <div class="spinner-grow text-primary" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-secondary" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-success" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-danger" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-warning" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-info" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-light" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-dark" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-grow text-primary" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-secondary" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-success" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-danger" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-warning" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-info" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-light" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-dark" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;</pre>
          <h5>对齐</h5>
          <h6>外边距</h6>
          <p>使用类似于 <code>.m-5</code> 这样的 <code>margin</code> 工具。</p>
          <div class="border-example">
            <div class="spinner-border m-5" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border m-5" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;</pre>
          <h5>布局</h5>
          <h6>Flex</h6>
          <div class="border-example">
            <div class="d-flex justify-content-center">
              <div class="spinner-border" role="status">
                <span class="visually-hidden">加载中...</span>
              </div>
            </div>
          </div>
          <pre>&lt;div class="d-flex justify-content-center"&gt;
  &lt;div class="spinner-border" role="status"&gt;
    &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
          <div class="border-example">
            <div class="d-flex align-items-center">
              <strong>加载中...</strong>
              <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
            </div>
          </div>
          <pre>&lt;div class="d-flex align-items-center"&gt;
  &lt;strong&gt;加载中...&lt;/strong&gt;
  &lt;div class="spinner-border ms-auto" role="status" aria-hidden="true"&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
          <h6>Floats</h6>
          <div class="border-example">
<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">加载中...</span>
  </div>
</div>
          </div>
          <pre>&lt;div class="clearfix"&gt;
  &lt;div class="spinner-border float-end" role="status"&gt;
    &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
          <h6>Text align</h6>
          <div class="border-example">
            <div class="text-center">
              <div class="spinner-border" role="status">
                <span class="visually-hidden">加载中...</span>
              </div>
            </div>
          </div>
          <pre>&lt;div class="text-center"&gt;
  &lt;div class="spinner-border" role="status"&gt;
    &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
          <h6>大小</h6>
          <div class="border-example">
            <div class="spinner-border spinner-border-sm" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow spinner-grow-sm" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border spinner-border-sm" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow spinner-grow-sm" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;</pre>
          <p>或者，使用自定义CSS或内联样式根据需要更改维度。</p>
          <div class="border-example">
            <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border" style="width: 3rem; height: 3rem;" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status"&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/div&gt;</pre>
          <h6>按钮</h6>
          <div class="border-example">
            <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">加载中...</span>
            </button>
            <button class="btn btn-primary" type="button" disabled>
              <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
              加载中...
            </button>
          </div>
          <pre>&lt;button class="btn btn-primary" type="button" disabled&gt;
  &lt;span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/button&gt;
&lt;button class="btn btn-primary" type="button" disabled&gt;
  &lt;span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"&gt;&lt;/span&gt;
  加载中...
&lt;/button&gt;</pre>
          <div class="border-example">
<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">加载中...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  加载中...
</button>
          </div>
          <pre>&lt;button class="btn btn-primary" type="button" disabled&gt;
  &lt;span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"&gt;&lt;/span&gt;
  &lt;span class="visually-hidden"&gt;加载中...&lt;/span&gt;
&lt;/button&gt;
&lt;button class="btn btn-primary" type="button" disabled&gt;
  &lt;span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"&gt;&lt;/span&gt;
  加载中...
&lt;/button&gt;</pre>

        </div>
      </div>
    </div>

  </div>

</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
</html>