スピナー

About

外観、配置、サイズは、utility (ユーティリティ) クラスを使用して簡単にカスタマイズすることができます。

Border spinne

Border spinner (ボーダースピナー) を使用して軽量なローディングインジケーターを実現します。

vue

<template>
 <Spinner />
</template>

Colors

Spinner コンポーネントに text-color 属性を使用します。

標準のスピナーでは、 text color utilitites を使用することができます。

vue

<template>
 <Spinner text-color="primary" />
 <Spinner text-color="secondary" />
 <Spinner text-color="success" />
 <Spinner text-color="danger" />
 <Spinner text-color="warning" />
 <Spinner text-color="info" />
 <Spinner text-color="light" />
 <Spinner text-color="dark" />
</template>

Growing spinner

grow spinner (グロースピナー) も用意されています。動きは下記を参考にしてください。

vue

<template>
 <Spinner spinner="grow" />
</template>

繰り返しますが、このスピナーはtext-colorで作られていますので、[text color utilities][color]で簡単に外観を変えることができます。ここでは、サポートされているバリエーションとともに、青で表示しています。

vue

<template>
 <Spinner
  spinner="grow"
  text-color="primary"
 />
 <Spinner
  spinner="grow"
  text-color="secondary"
 />
 <Spinner
  spinner="grow"
  text-color="success"
 />
 <Spinner
  spinner="grow"
  text-color="danger"
 />
 <Spinner
  spinner="grow"
  text-color="warning"
 />
 <Spinner
  spinner="grow"
  text-color="info"
 />
 <Spinner
  spinner="grow"
  text-color="light"
 />
 <Spinner
  spinner="grow"
  text-color="dark"
 />
</template>

Alignment

rem, text-color, display: inline-flex で構築されています。

簡単にサイズを変更したり、色を変更したり、素早く整列させることができます。

Margin

mergin="5" margin utilities で簡単にスペースを追加できます。

vue

<template>
 <Spinner :mergin="5" />
</template>

Placement

flexbox utilities , float utilites , text alignment を使用して、配置することができます。

Flex

vue

<template>
 <b-div
  flex
  justify-content="center"
 >
  <Spinner>
   <b-span visually-hidden>
    Loading...
   </b-span>
  </Spinner>
 </b-div>
</template>

Loading...

vue

<template>
 <b-div
  flex
  align-items="center"
 >
  <strong>Loading...</strong>
  <Spinner
   aria-hidden="true"
   margin="s-auto"
  />
 </b-div>
</template>

Floats

vue

<template>
 <b-div clearfix>
  <Spinner float="end" />
 </b-div>
</template>

Text align

vue

<template>
 <b-div text-alignment="center">
  <Spinner />
 </b-div>
</template>

Size

sm 属性を追加して、サイズの変更ができます。

vue

<template>
 <Spinner sm />
 <Spinner
  spinner="grow"
  sm
 />
</template>

カスタムCSSやインラインスタイルを使用して、必要に応じて寸法を変更することができます。

vue

<template>
 <Spinner style="width: 3rem; height: 3rem" />
 <Spinner
  spinner="grow"
  style="width: 3rem; height: 3rem"
 />
</template>

Buttons

ボタンの中でスピナーを使用して、アクションが現在処理中または実行中であることを示します。

vue

<template>
 <b-button
  color="primary"
  disabled
 >
  <Spinner
   sm
   aria-hidden="true"
  />
 </b-button>
 <b-button
  color="primary"
  disabled
 >
  <Spinner
   sm
   aria-hidden="true"
  />
  Loading...
 </b-button>
</template>

vue

<template>
 <b-button
  button
  color="primary"
  disabled
 >
  <Spinner
   spinner="grow"
   sm
   aria-hidden="true"
  />
 </b-button>
 <b-button
  button
  color="primary"
  disabled
 >
  <Spinner
   spinner="grow"
   sm
   aria-hidden="true"
  />
  Loading...
 </b-button>
</template>

Bootstrap