加载器

加载器可用于在项目中显示加载状态。

示例

结果

加载中...

实时编辑器

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 为加载器提供两种动画样式。动画样式可以通过 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

旋转器