vue loading组件
<!--
*
* loadingGif组件--"数据请求中"
*
* 使用方法:
* <loading-gif :show-loading="showLoaddingGif"></loading-gif>
*
* 通过修改showLoaddingGif的true或者false 来控制loading的显示和隐藏!
*
-->
<template>
<div class='uil-default-css' style='transform:scale(0.3);' v-show="showLoading">
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(0deg) translate(0,-60px);transform:rotate(0deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(30deg) translate(0,-60px);transform:rotate(30deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(60deg) translate(0,-60px);transform:rotate(60deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(90deg) translate(0,-60px);transform:rotate(90deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(120deg) translate(0,-60px);transform:rotate(120deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(150deg) translate(0,-60px);transform:rotate(150deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(180deg) translate(0,-60px);transform:rotate(180deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(210deg) translate(0,-60px);transform:rotate(210deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(240deg) translate(0,-60px);transform:rotate(240deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(270deg) translate(0,-60px);transform:rotate(270deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(300deg) translate(0,-60px);transform:rotate(300deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
<div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(330deg) translate(0,-60px);transform:rotate(330deg) translate(0,-60px);border-radius:10px;position:absolute;'></div>
</div>
</template> <script>
export default {
props: ["showLoading"]
}
</script> <style lang="sass" rel="stylesheet/scss">
@-webkit-keyframes uil-default-anim {
0% {
opacity: 1
}
100% {
opacity: 0
}
} @keyframes uil-default-anim {
0% {
opacity: 1
}
100% {
opacity: 0
}
} .uil-default-css > div:nth-of-type(1) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(2) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: -0.4166666666666667s;
animation-delay: -0.4166666666666667s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(3) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: -0.33333333333333337s;
animation-delay: -0.33333333333333337s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(4) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: -0.25s;
animation-delay: -0.25s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(5) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: -0.16666666666666669s;
animation-delay: -0.16666666666666669s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(6) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: -0.08333333333333331s;
animation-delay: -0.08333333333333331s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(7) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(8) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: 0.08333333333333337s;
animation-delay: 0.08333333333333337s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(9) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: 0.16666666666666663s;
animation-delay: 0.16666666666666663s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(10) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(11) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: 0.33333333333333337s;
animation-delay: 0.33333333333333337s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
} .uil-default-css > div:nth-of-type(12) {
-webkit-animation: uil-default-anim 1s linear infinite;
animation: uil-default-anim 1s linear infinite;
-webkit-animation-delay: 0.41666666666666663s;
animation-delay: 0.41666666666666663s;
} .uil-default-css {
position: relative;
background: none;
width: 200px;
height: 200px;
}
</style>
<!-- * * loadingGif组件--"数据请求中" * * 使用方法: * <loading-gif :show-loading="showLoaddingGif"></loading-gif> * * 通过修改showLoaddingGif的true或者false 来控制loading的显示和隐藏! * --><template> <div class='uil-default-css' style='transform:scale(0.3);' v-show="showLoading"> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(0deg) translate(0,-60px);transform:rotate(0deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(30deg) translate(0,-60px);transform:rotate(30deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(60deg) translate(0,-60px);transform:rotate(60deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(90deg) translate(0,-60px);transform:rotate(90deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(120deg) translate(0,-60px);transform:rotate(120deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(150deg) translate(0,-60px);transform:rotate(150deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(180deg) translate(0,-60px);transform:rotate(180deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(210deg) translate(0,-60px);transform:rotate(210deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(240deg) translate(0,-60px);transform:rotate(240deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(270deg) translate(0,-60px);transform:rotate(270deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(300deg) translate(0,-60px);transform:rotate(300deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> <div style='top:80px;left:93px;width:14px;height:40px;background:#959199;-webkit-transform:rotate(330deg) translate(0,-60px);transform:rotate(330deg) translate(0,-60px);border-radius:10px;position:absolute;'></div> </div></template> <script> export default { props: ["showLoading"] }</script> <style lang="sass" rel="stylesheet/scss"> @-webkit-keyframes uil-default-anim { 0% { opacity: 1 } 100% { opacity: 0 } } @keyframes uil-default-anim { 0% { opacity: 1 } 100% { opacity: 0 } } .uil-default-css > div:nth-of-type(1) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(2) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: -0.4166666666666667s; animation-delay: -0.4166666666666667s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(3) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: -0.33333333333333337s; animation-delay: -0.33333333333333337s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(4) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: -0.25s; animation-delay: -0.25s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(5) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: -0.16666666666666669s; animation-delay: -0.16666666666666669s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(6) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: -0.08333333333333331s; animation-delay: -0.08333333333333331s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(7) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: 0s; animation-delay: 0s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(8) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: 0.08333333333333337s; animation-delay: 0.08333333333333337s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(9) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: 0.16666666666666663s; animation-delay: 0.16666666666666663s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(10) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(11) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: 0.33333333333333337s; animation-delay: 0.33333333333333337s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; } .uil-default-css > div:nth-of-type(12) { -webkit-animation: uil-default-anim 1s linear infinite; animation: uil-default-anim 1s linear infinite; -webkit-animation-delay: 0.41666666666666663s; animation-delay: 0.41666666666666663s; } .uil-default-css { position: relative; background: none; width: 200px; height: 200px; }</style>
vue loading组件的更多相关文章
- vue——loading组件
<template> <div class="loading" :style="{height:loadingRadiusVal+'px',width: ...
- VUE移动端音乐APP学习【四】:scroll组件及loading组件开发
scroll组件 制作scroll 组件,然后嵌套一个 DOM 节点,使得该节点就能够滚动.该组件中需要引入 BetterScroll 插件. scroll.vue: <template> ...
- Vue 封装的loading组件
<template> <div class="loadEffect"> <span></span> <span>< ...
- 浅尝Vue.js组件(二)
本篇目录: 插槽(Slot) 插槽内容 作用域 具名插槽 作用域插槽 独占默认插槽的缩写语法 解构插槽Prop 使用场景举例 动态插槽名 具名插槽缩写 动态组件&keep-alive 异步组件 ...
- 自定义vue全局组件use使用
自定义一个全局Loading组件,并使用:总结目录:|-components |-loading |-index.js 导出组件,并且install |-loading.vue 定义Loading组件 ...
- vue封装组件的正确方式-封装类似elementui的组件
最近读了下element的源码,仿照他封装了两种不同的组件. 第一种:通过组件来调用显示的 <template> <!--src/component/custom/main.vue- ...
- 自定义vue全局组件use使用(解释vue.use()的原理)
我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...
- vue2.0 仿手机新闻站(五)全局的 loading 组件
1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...
- [Loading Component]Loading组件的v-model设计是否不合理?
vue在2.4.2版本中给computed里的属性加了限制,详见assigning to a computed property without setter does not fail 项目将vue ...
随机推荐
- loj #535. 「LibreOJ Round #6」花火 树状数组求逆序对+主席树二维数点+整体二分
$ \color{#0066ff}{ 题目描述 }$ 「Hanabi, hanabi--」 一听说祭典上没有烟火,Karen 一脸沮丧. 「有的哦-- 虽然比不上大型烟花就是了.」 还好 Shinob ...
- redis中使用lua脚本
lua脚本 Lua是一个高效的轻量级脚本语言,用标准C语言编写并以源代码形式开放, 其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能 使用脚本的好处 1.减少网络开销,在Lua脚 ...
- abp框架angular 项目docker 手动部署到Linux环境中
1.https://aspnetboilerplate.com/Templates 2.后端项目发布,在publish中abp默认已经存在DockerFile文件 3.修改后端文件中的DockerFi ...
- ACM 计算几何向量
向量 简介注意事项基本计算 加减法 ~ 示例代码 长度 ~ 示例代码 数乘 ~ 示例代码 点积 应用 ~ 示例代码 叉积 ~ 示例代码 性质与应用 经典题目 向量旋转 操作目的 模板代码 简介 向量, ...
- Spring对外部属性文件指定的某个属性进行加密、解密
[From] http://blog.csdn.net/ethanq/article/details/7333897 在我们开发当中,经常会用到spring框架来读取属性文件的属性值,然后使用占位符引 ...
- HTML5实现多文件的上传示例代码
[转自] http://www.jb51.net/html5/136791.html 主要用到的是<input>的multiple属性 代码如下: <input type=" ...
- Putty之public key ssh认证入门
1.工作平台 客户端:Win2kEn Sp3,Putty Beta 0.53 服务器:RedHat72,OpenSSH_3.4p1 2.Putty简介 一个免费小巧的Win32平台下的ssh客户端.它 ...
- [V1-Team] 第一周总结
第一周总结 写在前面 会议名称 会议时间 会议时长 会议地点 第一次周例会 2019/4/1 19:00 70min F楼2层沙发休息处 附Github仓库:WEDO 例会照片 工作情况总结 人员 上 ...
- 金融量化分析-python量化分析系列之---使用python获取股票历史数据和实时分笔数据
财经数据接口包tushare的使用(一) Tushare是一款开源免费的金融数据接口包,可以用于获取股票的历史数据.年度季度报表数据.实时分笔数据.历史分笔数据,本文对tushare的用法,已经存在的 ...
- oracle12C--DG搭建配置
一,主库前期操作 搭建的话和11g差不多,点点点. 两台服务器,一台主库,一台从库 01,配置主库hosts cat /etc/hosts 192.168.0.31 node12c01 192.168 ...