EpicSpinners–好看的网页Loading都在这

Vedu • 2021-01-18 13:53 • 资源分享 • 阅读 1229

介绍

EpicSpinners是一组易于使用的纯css打造的网页Loading效果，并且同时整合了Vue组件可以方便的在Vue项目中进行使用，由于是纯css打造，你可以在任意网页项目中自行整合并使用！

Github

https://github.com/epicmaxco/epic-spinners

动图预览

代码预览

以下是一组代码，由于较多，仅仅展示一组

对应

所有实现都是通过css，可以直接使用无需引入

Vue整合

虽然存在了纯css的代码，但是官方整合了vue组件，拿来即用

快速开始

安装

npm install --save epic-spinners

<template>
  <div id="app">
     <atom-spinner
          :animation-duration="1000"
          :size="60"
          :color="\'#ff1d5e\'"
     />
  div>
template>

<script>
  // To use minified css and js files instead of .vue single file components:
  // import \'epic-spinners/dist/lib/epic-spinners.min.css\'
  // import {AtomSpinner} from \'epic-spinners/dist/lib/epic-spinners.min.js\'
  
  import {AtomSpinner} from \'epic-spinners\'
  export default {
    components: {
      AtomSpinner
    }
  }
script>

所有的Loading，可以自己选择并调节颜色或者尺寸

:animation-duration="2500"
  :size="70"
  :color="\'#ff1d5e\'"
/>

:animation-duration="2000"
  :pixel-size="70"
  :color="\'#ff1d5e\'"
/>

:animation-duration="1000"
  :dot-size="15"
  :dots-num="3"
  :color="\'#ff1d5e\'"
/>

:animation-duration="1200"
  :size="70"
  :color="\'#ff1d5e\'"
/>

:animation-duration="1200"
  :size="55"
  :color="\'#ff1d5e\'"
/>

:animation-duration="2000"
  :size="60"
  :color="\'#ff1d5e\'"
/>

:animation-duration="1250"
  :size="65"
  :color="\'#ff1d5e\'"
/>

:animation-duration="1000"
  :size="60"
  :color="\'#ff1d5e\'"
/>

:animation-duration="1500"
  :size="66"
  :color="\'#ff1d5e\'"
/>

:animation-duration="4000"
  :size="50"
  :color="\'#ff1d5e\'"
/>

:animation-duration="1200"
  :circles-num="3"
  :circle-size="15"
  :color="\'#ff1d5e\'"
/>

:animation-duration="2000"
  :size="65"
  :color="\'#ff1d5e\'"
/>

<self-building-square-spinner
  :animation-duration="6000"
  :size="40"
  :color="\'#ff1d5e\'"
/>

:animation-duration="1000"
  :size="65"
  :color="\'#ff1d5e\'"
/>

:animation-duration="4000"
  :size="60"
  :color="\'#ff1d5e\'"
/>

:animation-duration="1500"
  :size="64"
  :color="\'#ff1d5e\'"
/>

:animation-duration="3000"
  :size="60"
  :color="\'#ff1d5e\'"
/>

:animation-duration="1000"
  :size="60"
  :color="\'#ff1d5e\'"
/>

:animation-duration="2500"
  :rhombus-size="15"
  :color="\'#ff1d5e\'"
/>

:animation-duration="2000"
  :size="65"
  :color="\'#ff1d5e\'"
/>

总结

EpicSpinners这一组Loading效果非常实用且简单，开箱即用无需引入其它资源！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/20161.html

EpicSpinners–好看的网页Loading都在这

介绍

Github

动图预览

代码预览

Vue整合

总结

相关推荐

发表评论