EpicSpinners–好看的网页Loading都在这

介绍

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


好看的网页Loading都在这——EpicSpinners

Github

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

动图预览


好看的网页Loading都在这——EpicSpinners

代码预览

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

好看的网页Loading都在这——EpicSpinners

对应

好看的网页Loading都在这——EpicSpinners

所有实现都是通过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

发表评论

登录后才能评论