OmniMotion
返回组件库

脉冲加载

复刻来源stripe.com
React · Vue3加载指示ReactVue3CSS 原生

三点错峰缩放，表达持续进行中的轻量等待状态。

业务项目无源码 → 我们复刻实现，自动适配 React，复制代码拿去即可使用。

下载 React 代码下载 Vue3 代码
下载 ZIP（含 React + Vue3）
演示预览实时时长 1x
状态呼吸与脉冲波浪
播放速度已适配 prefers-reduced-motion
Spinner.jsx
/**
 * OmniMotion — 脉冲加载 / Spinner (React 18+ · 纯 CSS 版本)
 * 复刻来源: stripe.com — 三点错峰缩放
 * 用法: <Spinner variant="pulse" dots={3} />
 */
export default function Spinner({ variant = "pulse", dots = 3 }) {
  return (
    <span className="mk-pulse" role="status" aria-label="加载中">
      {Array.from({ length: dots }).map((_, i) => (
        <span key={i} className="mk-pulse__dot" style={{ animationDelay: i * 160 + "ms" }} />
      ))}
    </span>
  );
}

/* 样式（可直接放入全局 CSS）
.mk-pulse { display: inline-flex; align-items: center; gap: 10px; }
.mk-pulse__dot {
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--mk-primary-quiet);
  animation: mk-pulse 900ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes mk-pulse {
  0%, 100% { transform: scale(0.6); opacity: 0.35; }
  50% { transform: scale(1.15); opacity: 1; }
}
*/
属性 · Props
属性类型默认值说明
variant"pulse""pulse"加载样式，预留扩展位
dotsnumber3圆点数量
<Spinner variant="pulse" dots={3} />