Spinner

可使用 <b-spinner> 组件在项目中显示加载状态。通过轻量级 Vue 函数式组件仅使用基本 HTML 和 CSS 渲染。其外观、对齐和尺寸可使用一些内置属性或 Bootstrap v4 实用程序类轻松自定义。

可在任何地方放置 Spinners，包括按钮、提示甚至 <b-table> 的繁忙插槽内。

<div class="text-center">
  <b-spinner label="Spinning"></b-spinner>
  <b-spinner type="grow" label="Spinning"></b-spinner>
  <b-spinner variant="primary" label="Spinning"></b-spinner>
  <b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
  <b-spinner variant="success" label="Spinning"></b-spinner>
  <b-spinner variant="success" type="grow" label="Spinning"></b-spinner>
</div>

<!-- b-spinners.vue -->

Spinner 类型

Bootstrap 包含两种类型的 spinners。默认 spinner 类型称为 border（旋转圆圈边框），可选类型 grow（鼓动条形指示器）。

边框 spinner

使用默认 border 类型 spinner 作为轻量级加载指示器。

<div>
  <b-spinner label="Loading..."></b-spinner>
</div>

<!-- b-spinner-border.vue -->

增长 spinner

如果你不喜欢 border spinner，可通过将属性 type 设置为 'grow' 来切换到 grow spinner。虽然从技术上来说它不旋转，不过它确实重复增长！

<div>
  <b-spinner type="grow" label="Loading..."></b-spinner>
</div>

<!-- b-spinner-grow.vue -->

Spinner 颜色变体

Spinner 使用 currentColor 作为它们的 color，意味着它继承了当前的字体颜色。可通过使用 variant 属性使用标准文本颜色变体自定义颜色，也可在此组件上放置类或样式来更改其颜色。

属性 variant 会将变体名称转换为 Bootstrap v4 类 .text-{variant}，所以如果你已自定义定义文本颜色变体，可随时通过 variant 属性使用它们。

<template>
  <div>
    <div class="text-center mb-3 d-flex justify-content-between">
      <b-spinner
        v-for="variant in variants"
        :variant="variant"
        :key="variant"
      ></b-spinner>
    </div>

    <div class="text-center d-flex justify-content-between">
      <b-spinner
        v-for="variant in variants"
        :variant="variant"
        :key="variant"
        type="grow"
      ></b-spinner>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        variants: ['primary', 'secondary', 'danger', 'warning', 'success', 'info', 'light', 'dark']
      }
    }
  }
</script>

<!-- b-spinner-variants.vue -->

為何不使用 border-color 程式庫？每個 border 轉動功能都會至少為其中一面設定 transparent 的框線，所以 .border-{color} 程式庫會覆寫設定。

大小

將 small 屬性設定為 true，即可製作較小的轉動功能，並可快速使用於其他元件中。

<div>
  <b-spinner small label="Small Spinner"></b-spinner>
  <b-spinner small label="Small Spinner" type="grow"></b-spinner>
</div>

<!-- b-spinner-sizes.vue -->

也可以視需要使用自訂 CSS 或內嵌樣式來變更尺寸。

<div>
  <b-spinner style="width: 3rem; height: 3rem;" label="Large Spinner"></b-spinner>
  <b-spinner style="width: 3rem; height: 3rem;" label="Large Spinner" type="grow"></b-spinner>
</div>

<!-- b-spinner-sizes-custom.vue -->

對齊

Bootstrap 中的轉動功能是使用 rem、currentColor 以及 display: inline-flex 建置。代表它們可以輕鬆地調整大小、變更顏色，並且快速對齊。

邊距

使用邊距程式庫，例如 .m-5，可輕鬆設定間距。

<div>
  <b-spinner class="m-5" label="Busy"></b-spinner>
</div>

<!-- b-spinner-margin.vue -->

配置

使用彈性方塊程式庫、浮動程式庫或文字對齊程式庫類別，即可將轉動功能配置到任何環境中，並精確地放置在所需的位置。

彈性

使用彈性程式庫類別

<div>
  <div class="d-flex justify-content-center mb-3">
    <b-spinner label="Loading..."></b-spinner>
  </div>

  <div class="d-flex align-items-center">
    <strong>Loading...</strong>
    <b-spinner class="ml-auto"></b-spinner>
  </div>
</div>

<!-- b-spinner-flex.vue -->

浮動

使用浮動程式庫類別

<div class="clearfix">
  <b-spinner class="float-right" label="Floated Right"></b-spinner>
</div>

<!-- b-spinner-floats.vue -->

文字對齊

使用文字對齊程式庫類別

<div class="text-center">
  <b-spinner variant="primary" label="Text Centered"></b-spinner>
</div>

<!-- b-spinner-text-align.vue -->

按鈕中的轉動功能

在按鈕中使用轉動功能，以表示目前正在處理或執行的動作。您也可以將標籤文字從轉動功能元素中切換出來，並視需要使用按鈕文字。

<div>
  <b-button variant="primary" disabled>
    <b-spinner small></b-spinner>
    <span class="sr-only">Loading...</span>
  </b-button>

  <b-button variant="primary" disabled>
    <b-spinner small type="grow"></b-spinner>
    Loading...
  </b-button>
</div>

<!-- b-spinner-buttons.vue -->

轉動功能的無障礙功能

透過 label 屬性或 label 插槽，將隱藏式標籤文字置於螢幕閱讀器使用者所用的轉動功能中。該內容會置於 <span> 元素中，並包覆於轉動功能內部，該元素具有 sr-only 類別，這會讓螢幕閱讀器使用者可以使用標籤。

基於無障礙功能考量，如果提供了標籤，每個轉動功能會自動具備 role="status" 屬性。如果需要，您可以透過 role 屬性自訂角色。若未提供標籤，指定的 role 就不會套用。

此外，如果未提供標籤，轉動功能會自動具備 aria-hidden="true" 屬性，將轉動功能隱藏於螢幕閱讀器使用者。p>

請另參閱

除了 <b-spinner> 元件，您也可以使用動畫圖示。

元件參考

`<b-spinner>`

功能元件

檢視原始碼

<b-spinner> 屬性
<b-spinner> 插槽

屬性

所有屬性的預設值都是全域設定值。

屬性	類型	預設值	說明
`標籤`	`文字字串`		置於 sr-only 標籤的文字內容
`角色`	`文字字串`	`'status'`	設定 ARIA 屬性 `role` 為特定的值
`小型`	`布林`	`false`	設定時，會顯示較小的滾動列，適合放置在按鈕中
`標籤`	`文字字串`	`'span'`	指定要顯示的 HTML 標籤，取代預設標籤
`類型`	`文字字串`	`'border'`	要顯示的滾動列類型。目前支援的類型有 'border' 和 'grow'
`變體`	`文字字串`		將 Bootstrap 主題色彩變體之一套用至元件

插槽

名稱	說明
`標籤`	放入 sr-only 標籤中的內容

導入個別元件

您可以透過下列已命名匯出，將個別元件匯入您的專案中

元件	命名匯出	匯入路徑
`<b-spinner>`	`BSpinner`	`bootstrap-vue`

範例

import { BSpinner } from 'bootstrap-vue'
Vue.component('b-spinner', BSpinner)

作為 Vue.js 外掛導入

此外掛包含所有上面列出的個別元件. 外掛也包含任何元件別名。

命名匯出	匯入路徑
`SpinnerPlugin`	`bootstrap-vue`

範例

import { SpinnerPlugin } from 'bootstrap-vue'
Vue.use(SpinnerPlugin)