企业官网建设流程全解析

• 前端
• 教程

导读

本文围绕 30-seconds-of-react 仓库中的 loader 代码片段 展开，深入讲解一个纯函数式 React 加载指示器组件：它仅用一个 SVG 圆形元素、两组 CSS@keyframes动画，即可在任意 React 项目中渲染出带"描边进度感"的旋转加载动画。读完本文，你将掌握size属性驱动的 SVG 尺寸控制、stroke-dasharray/stroke-dashoffset模拟描边循环的动画原理，以及如何复用该组件与其他异步加载类代码片段（如useAsync、useFetch、懒加载图片）组合出完整的加载态方案。

组件定位：仓库中的"极简加载态"范本

在 30-seconds-of-react 的snippets目录下，每个代码片段都是一段可独立复制使用的 React 实现。loader.md属于components标签分类，其核心职责用原文档的一句话即可概括：

Renders a spinning loader component.（渲染一个旋转的加载器组件。）

与仓库中其他交互复杂的组件（如带水波纹的 ripple-button.md、可关闭的 alert.md）不同，Loader 是一个无状态、无副作用的展示型组件：它不需要useState()、useEffect()等任何 Hook，完全由 props 与 CSS 驱动。这种设计使它成为项目中"加载中"场景最廉价的兜底方案，也天然契合 CONTRIBUTING.md 中"Snippets should solve real-world problems"的创作准则。

组件实现：一个受控尺寸的 SVG

原文档给出的组件本体只有 18 行，全部技术要点都在 SVG 属性与 props 的配合上：

const Loader = ({ size }) => { return ( <svg className="loader" xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <circle cx="12" cy="12" r="10" /> </svg> ); };

逐属性拆解其设计意图：

• sizeprop 决定渲染尺寸：width与height都直接绑定size，因此调用方只需传一个数字即可等比缩放整个加载器，无需关心内部坐标。这是原文档明确指出的第一点工作方式。
• viewBox="0 0 24 24"提供坐标系：SVG 内容在 24×24 的逻辑坐标系中绘制，width/height只负责最终呈现的物理尺寸，二者解耦后缩放不会失真。
• 单个<circle>作为唯一内容：圆心(12, 12)居中，半径r="10"，恰好内切于 24×24 的坐标系，形成标准的圆环骨架。
• stroke="currentColor"继承文字颜色：描边颜色不写死，而是继承 CSS 的color属性，这让调用方可以通过外层容器的color一行代码换色，无需改动组件。
• fill="none"与strokeWidth="2"塑造"圆环"而非"圆盘"：这是加载器视觉形态的关键，配合strokeLinecap="round"/strokeLinejoin="round"保证描边端点圆润。

CSS 动画：两组关键帧的协同

原文档的核心难点在 CSS 部分——旋转与"描边伸缩"由两组动画共同完成：

.loader { animation: rotate 2s linear infinite; } @keyframes rotate { 100% { transform: rotate(360deg); } } .loader circle { animation: dash 1.5s ease-in-out infinite; } @keyframes dash { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } }

两组动画的分工与原理：

• rotate：让整个 SVG 匀速旋转。2s linear infinite表示 2 秒一圈、匀速、无限循环。由于圆的视觉对称性，旋转本身单独看并不明显，它是为了配合描边动画才存在的。
• dash：制造"描边进度伸缩"的错觉。这是整个加载器最有技术含量的一环：
  • stroke-dasharray定义了描边的"实线长度, 空白长度"序列。圆周长约为2 × π × 10 ≈ 62.8，但这里以 150 为参照值，1, 150表示实线几乎缩成一点，90, 150则表示一段较长的弧。
  • stroke-dashoffset控制虚线图案沿路径的起始偏移量，正值向路径起点方向收缩。从0走到-124，虚线起点不断前移，视觉上形成"笔尖追赶并缩短弧长"的动态。
  • 组合效果：0%时描边几乎不可见 →50%时弧长拉伸到最长 →100%时弧长缩短且起点偏移到远处，配合外层旋转，呈现出一条"循环收缩伸展"的经典加载动画（与 Material Design 风格 Circular Progress 异曲同工）。
• 缓动差异是层次感来源：外层linear匀速旋转，内层ease-in-out加速减速伸缩，两层节奏错开，观感更自然。

使用方式：挂载到 React 根节点

原文档提供的运行示例使用 React 18 的createRootAPI：

ReactDOM.createRoot(document.getElementById('root')).render( <Loader size={24} /> );

使用时只需注意两点：

1. size是唯一必需 prop，传入 24 即渲染 24×24 像素的加载器；省略时width/height为undefined，因此建议总是显式传入。
2. 示例假设页面存在id="root"的容器节点，这是 React 18 以上版本的标准挂载方式（仓库内 toggle.md、star-rating.md 等片段的示例均采用同一写法）。
3. 配套的 CSS 需随组件一并引入，否则 SVG 只显示一个静态圆环。

实战组合：把 Loader 接入真实加载流程

从仓库源码结构看，loader.md虽独立成文，但最能发挥价值的场景是与异步类代码片段组合。以下三种组合均有仓库内现成依据：

组合一：配合useAsyncHook 管理异步状态。use-async.md 返回{ loading, error, value, run }，其中loading正是渲染 Loader 的天然开关。其内置示例中手写了<div>Loading...</div>，直接替换为<Loader size={24} />即可获得一致的加载反馈。

组合二：配合useFetchHook 的请求占位。use-fetch.md 在response为空时返回Loading...文本，同样可以换成 Loader 组件，避免加载过程中出现空白闪烁。

组合三：作为图片懒加载的占位符。lazy-load-image.md 在图片真正进入视口前会把src置为空字符串；此时在图片外层容器中渲染<Loader size={...} />，可以让用户在图片加载完成前看到稳定的视觉反馈，而不是一团空白。

这三种场景共同印证了 Loader 的定位：它是异步流程中"loading 状态"的可视化表达，与仓库内以状态管理见长的 Hook 片段是天然互补关系。

定制与扩展

基于原文档的实现，可以从三个维度低成本定制：

• 换色：由于stroke="currentColor"，在包裹 Loader 的任意元素上设置color（如color: #1976d2），即可全局改变描边颜色，无需改动组件。
• 调速：修改rotate的2s与dash的1.5s时长，可营造更快或更沉稳的节奏；需要"转一次就停"的场景可去掉infinite并配合状态控制动画类名。
• 换尺寸：直接传不同的size值即可，SVG 的viewBox保证任意尺寸下圆环比例不变。

小结

loader.md是 30-seconds-of-react 仓库中"小而美"的代表：一个sizeprop、一个<circle>、两组@keyframes，就完成了一个观感专业、可随意缩放的加载指示器。它不依赖任何第三方库与 Hook，复制 完整片段 即可直接投入使用；理解stroke-dasharray与stroke-dashoffset的配合逻辑后，你还能举一反三，用它实现进度环、环形倒计时等更多描边动画效果。

• 前端
• 教程