介绍
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