如何在Storybook中添加动画Spinner组件？

是否需要从导入SVG开始？ #

不一定。你可以根据需求选择三种常见方案：

• 纯CSS实现的Spinner（无需SVG，代码轻量、易维护）
• SVG动画Spinner（适合需要自定义旋转图形的场景）
• 直接使用UI组件库（如Ant Design、Material UI）内置的Spinner组件

下面分别介绍两种自定义实现的步骤，以及如何在Storybook中集成。

方案一：纯CSS动画Spinner #

1. 创建Spinner组件 #

新建Spinner.jsx（或Spinner.tsx）：

import './Spinner.css';

const Spinner = ({ size = 'medium', color = '#0070f3' }) => {
  const sizeClass = `spinner--${size}`;
  return (
    <div className={`spinner ${sizeClass}`} style={{ borderTopColor: color }} />
  );
};

export default Spinner;

对应的Spinner.css：

.spinner {
  display: inline-block;
  border: 3px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner--small { width: 20px; height: 20px; border-width: 2px; }
.spinner--medium { width: 32px; height: 32px; }
.spinner--large { width: 48px; height: 48px; border-width: 4px; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

2. 编写Storybook故事 #

新建Spinner.stories.jsx：

import Spinner from './Spinner';

export default {
  title: 'Components/Spinner',
  component: Spinner,
  argTypes: {
    size: {
      control: { type: 'select', options: ['small', 'medium', 'large'] },
    },
    color: { control: 'color' },
  },
};

const Template = (args) => <Spinner {...args} />;

export const Default = Template.bind({});
Default.args = {
  size: 'medium',
  color: '#0070f3',
};

export const LargeBlue = Template.bind({});
LargeBlue.args = {
  size: 'large',
  color: '#2563eb',
};

方案二：SVG动画Spinner #

如果需要自定义旋转图形（比如非圆形的加载动画），可以选择SVG方案：

1. 创建SVG Spinner组件 #

新建SVGSprinner.jsx：

const SVGSprinner = ({ width = 32, height = 32, color = '#0070f3' }) => {
  return (
    <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle
        cx="16"
        cy="16"
        r="14"
        stroke={color}
        strokeWidth="4"
        strokeLinecap="round"
        strokeDasharray="44"
        strokeDashoffset="0"
        style={{ animation: 'spin-dash 1.4s ease-in-out infinite' }}
      />
      <style>
        {`
          @keyframes spin-dash {
            0% { stroke-dashoffset: 44; }
            50% { stroke-dashoffset: 11; transform: rotate(135deg); }
            100% { stroke-dashoffset: 44; transform: rotate(450deg); }
          }
        `}
      </style>
    </svg>
  );
};

export default SVGSprinner;

2. 编写Storybook故事 #

新建SVGSprinner.stories.jsx：

import SVGSprinner from './SVGSprinner';

export default {
  title: 'Components/SVGSprinner',
  component: SVGSprinner,
  argTypes: {
    width: { control: 'number' },
    height: { control: 'number' },
    color: { control: 'color' },
  },
};

const Template = (args) => <SVGSprinner {...args} />;

export const Default = Template.bind({});
Default.args = {
  width: 32,
  height: 32,
  color: '#0070f3',
};

验证效果 #

执行命令启动Storybook：

npm run storybook

在左侧导航栏找到对应组件，即可预览动画效果，还能通过面板调整参数查看不同样式。

内容的提问来源于stack exchange，提问作者John Lee