Loading 加载

旋转加载指示器。width / height 可调，thickness 可调，color 默认主橙。

实时预览

下方渲染的就是 src/components/ui/Spinner/Spinner.tsx 本体（reanimated 4 worklet 驱动旋转动画），通过 react-native-web 翻译成浏览器节点。

尺寸

颜色

thickness · 描边粗细

用法

import { Spinner } from '@unif/react-native-design';
import { useColors } from '@unif/react-native-design';

function Demo() {
  const c = useColors();
  return (
    <>
      <Spinner />                                       {/* 默认 18px 主橙 */}
      <Spinner size={24} />                             {/* 24px */}
      <Spinner color={c.success} />                     {/* 绿色 */}
      <Spinner color={c.foregroundSubtle} thickness={1.5} />  {/* 细线灰 */}
    </>
  );
}

API

Prop	Type	默认	说明
size	number	18	直径
color	string	c.primary（运行期 hook 取）	旋转弧颜色
thickness	number	2	描边粗细
style	StyleProp<ViewStyle>	—	外层样式

节奏

900ms 一圈，线性 easing，不要回弹。这是设计令牌 motion 之外的特例——加载体感需要稳定均匀。