ByteNote

SVG Spinners 是一套精心设计的开源加载动画图标库，由 Utkarsh Verma 开发，包含 46 个高质量的 SVG 格式加载动画图标。这些图标采用纯 SVG 实现，支持无限缩放而不失真，非常适合用于网页、移动应用和设计项目中作为加载状态指示器。

项目简介

SVG Spinners 提供了多种风格的加载动画，包括：

圆点动画：12-dots-scale-rotate、3-dots-bounce、3-dots-fade、6-dots-rotate 等
环形动画：90-ring、180-ring、270-ring、eclipse、ring-resize 等
条形动画：bars-fade、bars-rotate-fade、bars-scale 等
方块动画：blocks-scale、blocks-shuffle、blocks-wave 等
脉冲动画：pulse、pulse-ring、pulse-rings-multiple 等
其他特效：bouncing-ball、clock、dot-revolve、gooey-balls、tadpole、wifi 等

核心特性

纯 SVG 实现：基于 SVG 原生动画，无需 JavaScript 依赖
无限缩放：矢量格式，任意尺寸都保持清晰
轻量级：单个图标文件极小，加载速度快
多格式支持：提供 SVG、PNG、React JSX、Base64 等多种格式
可自定义：支持调整颜色、大小、描边粗细
MIT 许可证：完全免费，可用于个人和商业项目

使用方法

直接嵌入 SVG

html

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <style>
    .spinner_ajPY {
      transform-origin: center;
      animation: spinner_AtaB .75s infinite linear;
    }
    @keyframes spinner_AtaB {
      100% { transform: rotate(360deg); }
    }
  </style>
  <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/>
  <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="spinner_ajPY"/>
</svg>

React 组件中使用

jsx

import { ReactComponent as Spinner } from './svg-spinners-90-ring.svg';

function LoadingButton() {
  return (
    <button disabled>
      <Spinner width="24" height="24" />
      加载中...
    </button>
  );
}

作为 CSS 背景图

css

.loading {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyLDFBMTEsMTEsMCwxLDAsMjMsMTIsMTEsMTEsMCwwLDAsMTIsMVptMCwxOWE4LDgsMCwxLDEsOC04QTgsOCwwLDAsMSwxMiwyMFoiIG9wYWNpdHk9Ii4yNSIvPjxwYXRoIGQ9Ik0xMC4xNCwxLjE2YTExLDExLDAsMCwwLTksOC45MkExLjU5LDEuNTksMCwwLDAsMi40NiwxMkExLjUyLDEuNTIsMCwwLDAsNC4xMSwxMC43YTgsOCwwLDAsMSw2LjY2LTYuNjFBLjQyLjQyLDAsMCwwLDEyLDIuNjloMEExLjU3LDEuNTcsMCwwLDAsMTAuMTQsMS4xNloiPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBkdXI9IjAuNzVzIiB2YWx1ZXM9IjAgMTIgMTI7MzYwIDEyIDEyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvcGF0aD48L3N2Zz4=') no-repeat center;
  width: 24px;
  height: 24px;
}

图标尺寸与颜色

SVG Spinners 支持多种预设尺寸：

24px（默认）
48px
64px
128px
256px
512px
1024px

颜色可通过修改 SVG 的 fill 或 stroke 属性自定义，支持任何有效的 CSS 颜色值。

应用场景

页面加载：数据获取时的全屏加载指示
按钮状态：提交表单时的按钮加载动画
无限滚动：列表底部加载更多时的提示
文件上传：上传进度等待状态
导航切换：路由切换时的过渡动画

获取方式

可通过以下平台获取 SVG Spinners：

Iconbuddy 网站：https://iconbuddy.com/svg-spinners
Figma 插件：搜索 "Iconbuddy"
VS Code 扩展：安装 Iconbuddy 扩展
Chrome 扩展：Iconbuddy 图标库
npm 包：可通过 @svg-spinners 相关包安装

许可证

SVG Spinners 采用 MIT 许可证开源，可自由用于个人和商业项目。

字节笔记本

SVG Spinners - 开源加载动画图标库