master

分支 (3)

管理

管理

master

style

feature/非圆角青绿配色

Light-Year-Admin-Using-Iframe-v4
/
lyear_ui_spinners.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>加载状态 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

  <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="sr-only"&gt;Loading...&lt;/span&gt;</code>。</p>
          <div class="border-example">
            <div class="spinner-border" role="status">
              <span class="sr-only">Loading...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;</pre>
          <h6 class="mt-3">颜色</h6>
          <div class="border-example">
            <div class="spinner-border text-primary" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-secondary" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-success" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-danger" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-warning" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-info" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-light" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-border text-dark" role="status">
              <span class="sr-only">Loading...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border text-primary" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-secondary" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-success" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-danger" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-warning" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-info" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-light" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-border text-dark" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&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="sr-only">Loading...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-grow" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;</pre>
          <h6>颜色</h6>
          <div class="border-example">
            <div class="spinner-grow text-primary" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-secondary" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-success" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-danger" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-warning" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-info" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-light" role="status">
              <span class="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow text-dark" role="status">
              <span class="sr-only">Loading...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-grow text-primary" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-secondary" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-success" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-danger" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-warning" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-info" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-light" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow text-dark" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;</pre>
          <h5>对齐</h5>
          <h6>外边距</h6>
          <div class="border-example">
            <div class="spinner-border m-5" role="status">
              <span class="sr-only">Loading...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border m-5" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&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="sr-only">Loading...</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="sr-only"&gt;Loading...&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
          <div class="border-example">
            <div class="d-flex align-items-center">
              <strong>Loading...</strong>
              <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
            </div>
          </div>
          <pre>&lt;div class="d-flex align-items-center"&gt;
  &lt;strong&gt;Loading...&lt;/strong&gt;
  &lt;div class="spinner-border ml-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-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
          </div>
          <pre>&lt;div class="clearfix"&gt;
  &lt;div class="spinner-border float-right" role="status"&gt;
    &lt;span class="sr-only"&gt;Loading...&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="sr-only">Loading...</span>
              </div>
            </div>
          </div>
          <pre>&lt;div class="text-center"&gt;
  &lt;div class="spinner-border" role="status"&gt;
    &lt;span class="sr-only"&gt;Loading...&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="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow spinner-grow-sm" role="status">
              <span class="sr-only">Loading...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border spinner-border-sm" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow spinner-grow-sm" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&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="sr-only">Loading...</span>
            </div>
            <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
              <span class="sr-only">Loading...</span>
            </div>
          </div>
          <pre>&lt;div class="spinner-border" style="width: 3rem; height: 3rem;" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
&lt;/div&gt;
&lt;div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status"&gt;
  &lt;span class="sr-only"&gt;Loading...&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="sr-only">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>
          </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="sr-only"&gt;Loading...&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;
  Loading...
&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="sr-only">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>
          </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="sr-only"&gt;Loading...&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;
  Loading...
&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>