Font Awesome 加载中图标

Font Awesome 提供了专属的加载中(Loading / Spinners)相关图标,主要集中在“Spinners”分类中。这些图标设计用于表示加载、等待、处理中状态,通常结合动画类(如 fa-spinfa-pulse)使用,实现旋转效果(最新版本 Font Awesome 6)。

常见加载中图标列表:

  • Spinner(经典旋转加载器):fa-solid fa-spinner
  • Circle Notch(圆环缺口旋转):fa-solid fa-circle-notch
  • Sync(刷新/旋转箭头):fa-solid fa-sync(或 fa-solid fa-sync-alt
  • Cog(齿轮旋转):fa-solid fa-cog(或 fa-solid fa-gear
  • Arrows Spin(箭头循环旋转):fa-solid fa-arrows-spin
  • Spinner Third(三分之一旋转):fa-solid fa-spinner-third
  • Loader(加载器变体,Pro 版常见)

更多完整列表和样式变体(Solid、Regular 等),请访问官方页面:https://fontawesome.com/icons/categories/spinners

动画使用(关键):

要实现旋转效果,必须添加 fa-spin(连续旋转)或 fa-pulse(八步阶梯旋转)类:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<i class="fa-solid fa-spinner fa-spin fa-2x"></i> <!-- 连续旋转 -->
<i class="fa-solid fa-spinner fa-pulse fa-2x"></i> <!-- 阶梯旋转 -->
<i class="fa-solid fa-circle-notch fa-spin fa-2x"></i> <!-- 圆环旋转 -->
<i class="fa-solid fa-cog fa-spin fa-2x"></i> <!-- 齿轮旋转 -->
<i class="fa-solid fa-sync fa-spin fa-2x"></i> <!-- 刷新旋转 -->

如果需要特定加载图标的更多变体、Pro 版图标或代码示例,请提供细节!

文章已创建 3181

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部