Amicro加载动画清单二18款条形与波浪Loading动画质感媲美Apple设计【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-Amicro 是一个基于 Motion原 Framer Motion的开源 React 微交互动画库。本篇清单聚焦其中18 款条形与波浪 Loading 动画——包括 Siri 风格声波、Apple EQ 均衡器、弹性条形与波纹动画质感媲美 Apple 官方设计一条命令即可装进你的项目让等待不再枯燥。加载状态是用户等待时的第一眼体验。一个恰到好处的 Loading 动画能悄悄传递系统在认真工作的信号。Amicro 把这 18 款动画统一归类在Bars Waves分组中完整目录见 src/data/loaders.ts源码集中在 registry/ui/loading/。为什么选 Amicro 的加载动画⚡️Copy-to-Code组件源码直接复制进你的代码库零运行时依赖负担深色/浅色双模式所有动画自动适配dark:主题配色纯声明式动画基于 Motion 的animatetransition硬件加速、流畅不卡shadcn/ui Registry 集成可按名称一键安装和 shadcn 生态无缝衔接快速上手3步把条形Loading动画装进项目第 1 步安装 Amicro 包npm install subhanhq/amicro第 2 步在 React / Next.js / Vite 项目中初始化配置npx subhanhq/amicrolatest init第 3 步按名称添加任意加载动画组件npx subhanhq/amicrolatest add siri-wave如果你使用 shadcn/ui还可在components.json中注册amicro命名空间然后npx shadcn add amicro/siri-wave直接安装。每款动画都配有对应的安装配置例如 registry/siri-wave.json、registry/apple-equalizer.json完整清单见 registry/registry.json。18款动画逐款解析 Siri风格声波最Apple的5款这一组是Apple 味最浓的动画适合聊天、语音、音频播放场景。动画效果源码Siri Wave5 根竖条依次起伏经典 Siri 声波siri-wave.tsxApple EQApple Music 均衡器风格4 根条带随机延迟跳动apple-equalizer.tsxSound Wave按 1-2-3-2-1 高度对称起伏柔和内敛apple-sound-wave.tsxSymmetric Wave9 根条以中轴对称向两侧荡开涟漪symmetric-wave.tsxWaveform8 根条按正弦函数错峰波形更自然waveform-loader.tsx其中 siri-wave.tsx 的核心实现极简每根条只需一个delay: i * 0.1的级联延迟就呈现出波浪流动的错觉——这正是整组动画的设计精髓用错时stagger代替复杂轨迹。 条形跳动与弹簧类动感最强的9款适合按钮加载、列表刷新等需要能量感的场景。动画效果源码Bar Cascade5 根条瀑布式阶梯起伏bar-cascade.tsxBouncing Bars3 根条纵向拉伸弹跳bouncing-bars.tsxSpring Bars3 根横条从左向右依次伸展spring-bars.tsxFluid Bars4 根条左右摇摆伸缩如液体流动fluid-bars.tsxMorphing Bars条高与间距同步变化呼吸感强morphing-bars.tsxElastic Bars3 根条弹性拉高回落elastic-bars.tsxSliding Bars横条上下滑动交替sliding-bars.tsxStacked Pulse3 层横条透明度宽度脉冲堆叠stacked-bar-pulse.tsxBar Sweep胶囊轨道内小圆点左右扫动bar-sweep.tsx⭕ 环形、手风琴与传送带4款形态独特的动画跳出横排竖条的套路用形状变化吸引注意力。动画效果源码Circular Bars8 根短条围绕圆心放射旋转伸缩circular-bars.tsxAccordion Loader4 根横条手风琴式依次伸缩accordion-loader.tsxSquare Accordion3 根方条如手风琴展开收拢square-accordion.tsxConveyor Loop小圆点在轨道上循环运输暗示进度推进conveyor-loop.tsx如何为你的场景选对加载动画聊天/语音消息加载→Siri Wave、Apple EQ用户对这些形态已有认知一眼就懂音频播放器、媒体缓冲→Waveform、Symmetric Wave与声波形态天然契合按钮内嵌加载态→Spring Bars、Bar Sweep体积小、节奏快不占布局列表/骨架屏区域→Stacked Pulse、Accordion Loader横向伸展贴合列表结构上传/同步进度暗示→Conveyor Loop、Bouncing Lines循环运动暗示数据在流动两个实用技巧所有动画默认适配深浅色主题无需额外配置动画尺寸由 Tailwind 类控制直接改高度/宽度类即可融入任意布局。写在最后从 5 根竖条的 Siri 声波到手风琴、传送带这 18 款条形与波浪 Loading 动画覆盖了绝大多数等待反馈场景。它们证明了一件事顶级的加载动画不需要复杂轨迹只需要恰到好处的节奏。完整 140 款动画源码都在 registry/ui/loading/ 目录组件目录数据由 scripts/generate-loaders-code.js 自动生成想深入研究实现细节从这里入手即可。【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/2 23:39:07 · 阅读 1.2k Amicro加载动画清单（二）：18款条形与波浪Loading动画，质感媲美Apple设计
Amicro加载动画清单二18款条形与波浪Loading动画质感媲美Apple设计【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-Amicro 是一个基于 Motion原 Framer Motion的开源 React 微交互动画库。本篇清单聚焦其中18 款条形与波浪 Loading 动画——包括 Siri 风格声波、Apple EQ 均衡器、弹性条形与波纹动画质感媲美 Apple 官方设计一条命令即可装进你的项目让等待不再枯燥。加载状态是用户等待时的第一眼体验。一个恰到好处的 Loading 动画能悄悄传递系统在认真工作的信号。Amicro 把这 18 款动画统一归类在Bars Waves分组中完整目录见 src/data/loaders.ts源码集中在 registry/ui/loading/。为什么选 Amicro 的加载动画⚡️Copy-to-Code组件源码直接复制进你的代码库零运行时依赖负担深色/浅色双模式所有动画自动适配dark:主题配色纯声明式动画基于 Motion 的animatetransition硬件加速、流畅不卡shadcn/ui Registry 集成可按名称一键安装和 shadcn 生态无缝衔接快速上手3步把条形Loading动画装进项目第 1 步安装 Amicro 包npm install subhanhq/amicro第 2 步在 React / Next.js / Vite 项目中初始化配置npx subhanhq/amicrolatest init第 3 步按名称添加任意加载动画组件npx subhanhq/amicrolatest add siri-wave如果你使用 shadcn/ui还可在components.json中注册amicro命名空间然后npx shadcn add amicro/siri-wave直接安装。每款动画都配有对应的安装配置例如 registry/siri-wave.json、registry/apple-equalizer.json完整清单见 registry/registry.json。18款动画逐款解析 Siri风格声波最Apple的5款这一组是Apple 味最浓的动画适合聊天、语音、音频播放场景。动画效果源码Siri Wave5 根竖条依次起伏经典 Siri 声波siri-wave.tsxApple EQApple Music 均衡器风格4 根条带随机延迟跳动apple-equalizer.tsxSound Wave按 1-2-3-2-1 高度对称起伏柔和内敛apple-sound-wave.tsxSymmetric Wave9 根条以中轴对称向两侧荡开涟漪symmetric-wave.tsxWaveform8 根条按正弦函数错峰波形更自然waveform-loader.tsx其中 siri-wave.tsx 的核心实现极简每根条只需一个delay: i * 0.1的级联延迟就呈现出波浪流动的错觉——这正是整组动画的设计精髓用错时stagger代替复杂轨迹。 条形跳动与弹簧类动感最强的9款适合按钮加载、列表刷新等需要能量感的场景。动画效果源码Bar Cascade5 根条瀑布式阶梯起伏bar-cascade.tsxBouncing Bars3 根条纵向拉伸弹跳bouncing-bars.tsxSpring Bars3 根横条从左向右依次伸展spring-bars.tsxFluid Bars4 根条左右摇摆伸缩如液体流动fluid-bars.tsxMorphing Bars条高与间距同步变化呼吸感强morphing-bars.tsxElastic Bars3 根条弹性拉高回落elastic-bars.tsxSliding Bars横条上下滑动交替sliding-bars.tsxStacked Pulse3 层横条透明度宽度脉冲堆叠stacked-bar-pulse.tsxBar Sweep胶囊轨道内小圆点左右扫动bar-sweep.tsx⭕ 环形、手风琴与传送带4款形态独特的动画跳出横排竖条的套路用形状变化吸引注意力。动画效果源码Circular Bars8 根短条围绕圆心放射旋转伸缩circular-bars.tsxAccordion Loader4 根横条手风琴式依次伸缩accordion-loader.tsxSquare Accordion3 根方条如手风琴展开收拢square-accordion.tsxConveyor Loop小圆点在轨道上循环运输暗示进度推进conveyor-loop.tsx如何为你的场景选对加载动画聊天/语音消息加载→Siri Wave、Apple EQ用户对这些形态已有认知一眼就懂音频播放器、媒体缓冲→Waveform、Symmetric Wave与声波形态天然契合按钮内嵌加载态→Spring Bars、Bar Sweep体积小、节奏快不占布局列表/骨架屏区域→Stacked Pulse、Accordion Loader横向伸展贴合列表结构上传/同步进度暗示→Conveyor Loop、Bouncing Lines循环运动暗示数据在流动两个实用技巧所有动画默认适配深浅色主题无需额外配置动画尺寸由 Tailwind 类控制直接改高度/宽度类即可融入任意布局。写在最后从 5 根竖条的 Siri 声波到手风琴、传送带这 18 款条形与波浪 Loading 动画覆盖了绝大多数等待反馈场景。它们证明了一件事顶级的加载动画不需要复杂轨迹只需要恰到好处的节奏。完整 140 款动画源码都在 registry/ui/loading/ 目录组件目录数据由 scripts/generate-loaders-code.js 自动生成想深入研究实现细节从这里入手即可。【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考