スピナー

スピナーは、プロジェクトで読み込み状態を示すために使用できます。

例

結果

読み込み中…

ライブエディター

import Spinner from 'react-bootstrap/Spinner'; function BasicExample() { return ( <Spinner animation="border" role="status"> <span className="visually-hidden">Loading...</span> </Spinner> ); } export default BasicExample;

import Spinner from 'react-bootstrap/Spinner';

function BasicExample() {
  return (
    <Spinner animation="border" role="status">
      <span className="visually-hidden">Loading...</span>
    </Spinner>
  );
}

export default BasicExample;

アニメーション

Bootstrapは、スピナーに2種類のアニメーションスタイルを提供しています。アニメーションスタイルは、`animation`プロパティで設定できます。スピナーを作成する際には、常にアニメーションスタイルを指定する必要があります。

**ボーダースピナー - `border`**

結果

読み込み中…

ライブエディター

import Spinner from 'react-bootstrap/Spinner'; function BorderExample() { return <Spinner animation="border" />; } export default BorderExample;

import Spinner from 'react-bootstrap/Spinner';

function BorderExample() {
  return <Spinner animation="border" />;
}

export default BorderExample;

**グロースピナー - `grow` **

結果

読み込み中…

ライブエディター

import Spinner from 'react-bootstrap/Spinner'; function GrowExample() { return <Spinner animation="grow" />; } export default GrowExample;

import Spinner from 'react-bootstrap/Spinner';

function GrowExample() {
  return <Spinner animation="grow" />;
}

export default GrowExample;

バリアント

`variant`プロパティを設定することで、両方のアニメーションスタイルにすべての標準的な視覚バリアントを使用できます。あるいは、`style`プロパティまたはカスタムCSSクラスを使用して、スピナーのカスタムサイズを設定することもできます。

結果

読み込み中…

ライブエディター

import Spinner from 'react-bootstrap/Spinner'; function VariantsExample() { return ( <> <Spinner animation="border" variant="primary" /> <Spinner animation="border" variant="secondary" /> <Spinner animation="border" variant="success" /> <Spinner animation="border" variant="danger" /> <Spinner animation="border" variant="warning" /> <Spinner animation="border" variant="info" /> <Spinner animation="border" variant="light" /> <Spinner animation="border" variant="dark" /> <Spinner animation="grow" variant="primary" /> <Spinner animation="grow" variant="secondary" /> <Spinner animation="grow" variant="success" /> <Spinner animation="grow" variant="danger" /> <Spinner animation="grow" variant="warning" /> <Spinner animation="grow" variant="info" /> <Spinner animation="grow" variant="light" /> <Spinner animation="grow" variant="dark" /> </> ); } export default VariantsExample;

import Spinner from 'react-bootstrap/Spinner';

function VariantsExample() {
  return (
    <>
      <Spinner animation="border" variant="primary" />
      <Spinner animation="border" variant="secondary" />
      <Spinner animation="border" variant="success" />
      <Spinner animation="border" variant="danger" />
      <Spinner animation="border" variant="warning" />
      <Spinner animation="border" variant="info" />
      <Spinner animation="border" variant="light" />
      <Spinner animation="border" variant="dark" />
      <Spinner animation="grow" variant="primary" />
      <Spinner animation="grow" variant="secondary" />
      <Spinner animation="grow" variant="success" />
      <Spinner animation="grow" variant="danger" />
      <Spinner animation="grow" variant="warning" />
      <Spinner animation="grow" variant="info" />
      <Spinner animation="grow" variant="light" />
      <Spinner animation="grow" variant="dark" />
    </>
  );
}

export default VariantsExample;

サイズ

標準サイズに加えて、`size`プロパティを`sm`に設定することで、より小さな事前設定サイズを使用できます。

結果

読み込み中…

ライブエディター

import Spinner from 'react-bootstrap/Spinner'; function SizesExample() { return ( <> <Spinner animation="border" size="sm" /> <Spinner animation="border" /> <Spinner animation="grow" size="sm" /> <Spinner animation="grow" /> </> ); } export default SizesExample;

import Spinner from 'react-bootstrap/Spinner';

function SizesExample() {
  return (
    <>
      <Spinner animation="border" size="sm" />
      <Spinner animation="border" />
      <Spinner animation="grow" size="sm" />
      <Spinner animation="grow" />
    </>
  );
}

export default SizesExample;

ボタン

元のBootstrapスピナーと同様に、これらはボタンでも使用できます。ボタンの中にスピナーを使用する場合は、`as`プロパティを設定して要素タイプを`span`に変更することをお勧めします。

結果

読み込み中…

ライブエディター

import Button from 'react-bootstrap/Button'; import Spinner from 'react-bootstrap/Spinner'; function ButtonExample() { return ( <> <Button variant="primary" disabled> <Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true" /> <span className="visually-hidden">Loading...</span> </Button>{' '} <Button variant="primary" disabled> <Spinner as="span" animation="grow" size="sm" role="status" aria-hidden="true" /> Loading... </Button> </> ); } export default ButtonExample;

import Button from 'react-bootstrap/Button';
import Spinner from 'react-bootstrap/Spinner';

function ButtonExample() {
  return (
    <>
      <Button variant="primary" disabled>
        <Spinner
          as="span"
          animation="border"
          size="sm"
          role="status"
          aria-hidden="true"
        />
        <span className="visually-hidden">Loading...</span>
      </Button>{' '}
      <Button variant="primary" disabled>
        <Spinner
          as="span"
          animation="grow"
          size="sm"
          role="status"
          aria-hidden="true"
        />
        Loading...
      </Button>
    </>
  );
}

export default ButtonExample;

アクセシビリティ

スピナーコンポーネントのアクセシビリティを最大限に確保するには、関連するARIA `role`プロパティを提供し、Bootstrapの`visually-hidden`クラスを使用して、スピナーの意味を表すスクリーンリーダーで読み取れるテキスト表現をコンポーネント内に含めることをお勧めします。

以下の例は、このコンポーネントのアクセシブルな使用方法を示しています。

結果

読み込み中…

ライブエディター

import Spinner from 'react-bootstrap/Spinner'; function BasicExample() { return ( <Spinner animation="border" role="status"> <span className="visually-hidden">Loading...</span> </Spinner> ); } export default BasicExample;

import Spinner from 'react-bootstrap/Spinner';

function BasicExample() {
  return (
    <Spinner animation="border" role="status">
      <span className="visually-hidden">Loading...</span>
    </Spinner>
  );
}

export default BasicExample;

API

スピナー