Epic Spinners - 免费开源的 Vue3 加载动画组件，纯 CSS 实现的，动效精致酷炫

今天翻翻浏览器书签，看到这款细腻酷炫的加载动画，比之前见过的质量都精美，推荐给各位。

Epic Spinners 介绍

Epic Spinners 是一个小巧精致的加载动画库， 由 Epicmax 团队开发。Epicmax 是一个致力于开源的技术团队。 之前我推荐过的 Vuestic UI 组件库也是出自他们之手。

技术特性

• 零 JavaScript ，纯 CSS 代码实现
• 动画酷炫细腻，动效变化流畅
• 使用非常简单，特别是在 Vue3 项目中

开发使用和建议

Epic Spinners

不过最简单的方法还是作为 vue.js 组件使用，首先先安装

npm install --save epic-spinners

在 Vue3 中使用：

<template> <div id="app"> <atom-spinner :animation-duration="1000" :size="60" :color="'#ff1d5e'" /> </div> </template> <script> // 引入要使用的动画 import {AtomSpinner} from 'epic-spinners' export default { components: { AtomSpinner } // ... 更多项目代码 } </script>

这样就可以使用的，结合 v-show 就可以显示动画。

之前我也介绍过两款纯 CSS 动画，分别是 CSS Loaders 和 Loaders.css，和它们相比， Epic Spinners 的动效则更精美细腻，层次感更强，尤其适合在屏幕显示效果好的手机项目中使用，比如整屏显示的加载动画。

免费开源说明

Epic Spinners 是一个免费开源的前端动画组件项目，由 Vasili Savitski 设计，Epicmax 开发，项目采用 MIT 开源协议，我们可以免费下载来使用，也可以用在商业项目上。