用于反应的 cli- 装载器

动画盲文-glyph装入回放自旋器. 19个独特的动画,零依赖性,完全可以访问. 现场演示 • 妇女 GitHub – (英语)

cli-loaders 给您19个动画盲文-glyph自旋器作为一组可堆肥,可访问的回放组件. 超过React本身的零运行时间依赖性.

特征

• 19个旋转动画 具有独有的盲文 Unicode 模式
• 零运行时间依赖关系 ——纯回放,无外部库
• 完全无障碍 - WCAG 2.1 AA, prefers-reduced-motion 支持, 语义 HTML
• 先输入脚本 完整的类型定义, DotShape 导出用于自定义渲染
• 可编曲 - 用于任何用途的7个部件+2个钩子
• 小捆绑 — ~ 15KB gzipped (lib) + 可选 SVG 渲染
• 形状定制 以圆形、正方形或方形( SVG 模式) 渲染

为什么要装货?

vs. 反应-平分器 : 更小的捆绑,类似终端美学的盲文Unicode艺术,全球默认的上下文API,形状定制(circles/squares/diamonds)

vs. 反应加载 : 零依赖性,全面无障碍测试,19+独有动画,SVG渲染模式

对自定义 CSS : 没有要维护的@ keyframes, 出框的减动支持, 语义 HTML, 默认可访问

安装

npm install @agilek/cli-loaders
# or
pnpm add @agilek/cli-loaders
# or
yarn add @agilek/cli-loaders

需要18号反应.

快开始

import { Spinner } from '@agilek/cli-loaders';

// Minimal — defaults to the "braille" spinner
<Spinner />

// Named + coloured
<Spinner name="helix" color="#7c3aed" size="1.5rem" />

// With custom dot shape (renders as SVG instead of braille text)
<Spinner name="scan" color="#00ff99" shape="square" size="2rem" />

构成部分

<Spinner>

基础动画"格来克". 显示为内线 <span> 所以它自然会掉入任何一行文字中.

任何额外的HTML跨度属性都会被转发.

<SpinnerInline>

Spinner + 灵活行中的孩子——方便内置状态信息.

<SpinnerInline name="braille" color="#00ff99">
  Fetching data…
</SpinnerInline>

接受全部 Spinner 道具外加:

<SpinnerText>

装饰有自旋器的文本字符串——支持书端模式,每端镜像一个.

<SpinnerText text="Deploying" color="#f59e0b" bookend />
// ⠿ Deploying ⠿

加起来 Spinner 道具来.

<SpinnerBadge>

带有自旋器的有色药丸徽章——适合活状态指标.

<SpinnerBadge label="Live"     color="#ef4444" />
<SpinnerBadge label="Syncing"  color="#38bdf8" />
<SpinnerBadge label="Building" color="#f59e0b" />

加起来 Spinner 道具来.

<SpinnerTrail>

使最近帧的滑动窗口减少不透明度——产生幽灵/运动-blur跟踪效应.

<SpinnerTrail name="helix" color="#7c3aed" size="2rem" trailLength={6} />

加起来 Spinner 道具来.

<SpinnerButton>

A 类 <button> 装入状态 禁用自身并显示旋转器 loading 这是真的。 完全转发参考.

<SpinnerButton
  loading={isSaving}
  onClick={handleSave}
  spinnerProps={{ name: 'braille', color: '#00ff99' }}
>
  Save changes
</SpinnerButton>

所有标准 <button> 属性被转发.

<SpinnerOverlay>

环绕任何内容并让一个居中旋转器在 active使用本地 inert 属性以阻断键盘/指针对下面内容的访问.

<SpinnerOverlay
  active={isLoading}
  name="orbit"
  color="#7c3aed"
  size="2.5rem"
  backdrop="rgba(0,0,0,0.4)"
>
  <YourContent />
</SpinnerOverlay>

加起来 Spinner 道具来.

<SpinnerProvider>

为每集设定全局默认值 Spinner- 树下的家庭成分 单个道具覆盖上下文值.

<SpinnerProvider
  defaultName="orbit"
  defaultColor="#7c3aed"
  defaultSpeed={1.2}
  respectReducedMotion={true}
>
  <App />
</SpinnerProvider>

// Inside: no props needed — picks up context defaults
<Spinner />
<SpinnerBadge label="Live" />

useSpinner 钩子

为完全自定义渲染而驱动任何带有生框字符串的元素 .

import { useSpinner } from 'cli-loaders';

function MyComponent() {
  const frame = useSpinner('helix', 1.5);

  return (
    <h1 style={{ fontFamily: 'monospace', color: '#00ff99' }}>
      {frame}
    </h1>
  );
}

useSpinner(
  name: SpinnerName,
  speed?: number,           // default 1
  paused?: boolean,         // default false
  ignoreReducedMotion?: boolean  // default false
): string

useSpinnerFrames

返回最后一个滑动窗口 length 框架——后面的原始 SpinnerTrail。 。 。 .

useSpinnerFrames(
  name: SpinnerName,
  length?: number,          // default 3
  speed?: number,
  paused?: boolean,
  ignoreReducedMotion?: boolean
): string[]

可用的旋转器

所有19个名字都作为 SpinnerName 工会类型.

import { spinnerNames } from 'cli-loaders';
// ['braille', 'braillewave', 'dna', ...]

无障碍

• 动画格言被包裹在 aria-hidden="true" ——屏幕阅读器是看不见的.
• 一个隐藏的视觉 <span role="status" aria-live="polite"> 公布 label 道具( 默认 ): "Loading") (中文(简体) ).
• SpinnerButton 套装 aria-busy 财务报告和审定财务报表 aria-disabled 自动打开按钮元素.
• SpinnerOverlay 套装 aria-busy 在容器上使用原生的 inert 属性来防止键盘/AT访问模糊内容.
• 默认情况下,所有动画都尊重 prefers-reduced-motion: reduce覆盖每个组件 ignoreReducedMotion 或全球通过 <SpinnerProvider respectReducedMotion={false}>。 。 。 .

财务问题

我可以用这个和Next.js一起吗? 对 在 App 路由器中同时作为客户端和服务器组件工作.

我如何定制旋转动画? 使用 useSpinner 钩来驱动任何自定义渲染 。 见 使用 Spinner 钩头 用于实例.

这对 TypeScript 有用吗 ? 完全类型支持. 所有组件道具和 DotShape 类型为类型安全导出.

我如何改变形状(圆圈、方块、钻石)? 使用 shape 道具 : <Spinner shape="square" />。见 旋转道具 详细情况.

这种支持是否减少了运动偏好? 是的,默认的。 动画暂停当 prefers-reduced-motion: reduce 已经设定。 覆盖 ignoreReducedMotion={true}。 。 。 .

捆绑大小是多少? ~ 15KB 为核心库提供gzipped. SVG渲染模式增加了~1KB.

常见模式

提交装入状态的表格

const [loading, setLoading] = useState(false);

async function handleSubmit() {
  setLoading(true);
  try {
    await api.post('/submit', data);
  } finally {
    setLoading(false);
  }
}

return (
  <SpinnerButton
    loading={loading}
    onClick={handleSubmit}
    spinnerProps={{ name: 'helix', color: '#00ff99' }}
  >
    {loading ? 'Submitting...' : 'Submit'}
  </SpinnerButton>
);

全屏加载覆盖

const [fetching, setFetching] = useState(false);

return (
  <SpinnerOverlay
    active={fetching}
    name="orbit"
    size="2rem"
    backdrop="rgba(0,0,0,0.5)"
  >
    <Dashboard data={data} />
  </SpinnerOverlay>
);

带有形状定制的内嵌状态消息

return (
  <SpinnerInline
    name="scan"
    shape="diamond"
    color="#7c3aed"
  >
    Syncing your data...
  </SpinnerInline>
);

捐款

欢迎虫子报告和拉出请求 请在提交大修改前打开一个问题 .

# Install dependencies
npm install

# Start the interactive demo
npm run dev

# Build the library
npm run build

许可证

麻省理工学院