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

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

Epic Spinners 介绍

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

Epic Spinners 官网
Epic Spinners 官网

技术特性

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

开发使用和建议

Epic Spinners 目前一共有20个加载动画，质量都很高，其中几个科技感很强的动效我特别喜欢。在 Epic Spinners 的官网上我可以看到这些动画的效果，实现的源代码也可以看到，可以作为 html / css 代码片段来使用，实际上可以在任何前端项目中使用。

查看动画源码
查看动画源码

不过最简单的方法还是作为 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 开源协议，我们可以免费下载来使用，也可以用在商业项目上。