微调器

微调框-Bootstrap 5和Material Design 2.0组件

使用完全由HTML构建的MDB微调器指示组件或页面的加载状态, CSS,没有JavaScript。


基本例子

将边框微调框用于轻型加载指示器。

Loading...

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

MDB“旋转器”可用于显示项目中的加载状态。它们仅与 HTML和CSS,这意味着您不需要任何JavaScript即可创建它们。但是,您将需要 一些自定义JavaScript来切换其可见性。它们的外观,对齐方式和尺寸可以 借助我们惊人的实用程序类轻松进行自定义。

为了方便访问,此处的每个加载程序都包括 role="status" 和一个嵌套 <span class="visually-hidden">Loading...</span>.


色彩

边框微调器将 currentColor 用于其 border-color ,这意味着 您可以自定义颜色 文本颜色实用程序。您可以使用任何 我们在标准微调器上的文本颜色实用程序。

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

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

为什么不使用 border-color 实用程序?
每个边框微调器为至少一侧指定一个 transparent 边框,因此 .border- {color} 实用程序将覆盖它。


不断增长的微调器

如果您不喜欢边框微调器,请切换到增长微调器。虽然从技术上讲不是 旋转,它确实会反复生长!

Loading...

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

同样,此微调器是使用 currentColor 构建的,因此您可以轻松更改其 文本颜色实用程序的外观。这里 它是蓝色,以及受支持的变体。

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

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

对准

Bootstrap中的微调器是使用 rem s, currentColor 显示:inline-flex 。这意味着它们可以轻松地调整大小,重新着色和 快速对齐。

保证金

Use 保证金工具 喜欢 .m-5 ,便于分隔。

Loading...

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

柔性

采用 flexbox实用程序, 浮动工具, or 文字对齐 可以在任何情况下将微调器精确地放置在所需位置的实用程序。

Loading...

            <div class="d-flex justify-content-center">
              <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
            </div>
          
Loading...

            <div class="d-flex align-items-center">
              <strong>Loading...</strong>
              <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
            </div>
          

Floats

Loading...

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

Text align

Loading...

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

尺寸

添加 .spinner-border-sm .spinner-grow-sm 以缩小尺寸 可以在其他组件中快速使用的微调器。

Loading...
Loading...

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

或者,使用自定义CSS或内联样式来根据需要更改尺寸。

Loading...
Loading...

          <div class="spinner-border" style="width: 3rem; height: 3rem" 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>
        

纽扣

使用按钮内的微调器指示当前正在处理或正在进行的操作。您 也可以从微调器元素中交换文本,并根据需要利用按钮文本。

Border spinner


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

不断增长的微调器


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