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>

<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 ...

随机推荐

Tensorflow博文列表
tensorflow:https://wenku.baidu.com/view/489ecc9727fff705cc1755270722192e44365853.html 语义分割SegNet:htt ...
BZOJ1012 [JSOI2008]最大数线段树
题目描述现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制:LLL不超过当前数列的长度.(L> ...
[POI2007]MEG-Megalopolis 树的dfs序+树状数组维护差分 BZOJ1103
题目描述 Byteotia has been eventually touched by globalisation, and so has Byteasar the Postman, who onc ...
href="#" 链接到当前页面
<a href="#" onclick="window.close()">关闭</a>将href="#"是指联接到当 ...
python学习之路---day23--模块
模块基本小结if __name__ == '__main__':一:import 引入模块模块:是一个包含python定义和声明的文件,文件名就是模块名字加上.py后缀,所有的py文件都可以看成是一个 ...
[BZOJ 3613][Heoi2014]南园满地堆轻絮
传送门这题......注意读题就行刚开始读成了Ans = Σ{|A[j]-B[j]|}以为是道神题,结果是Ans = Max{|A[j]-B[j]|}. 嗯.......可以证明Ans = 最大的 ...
【算法笔记】B1031 查验身份证
1031 查验身份证 (15 分) 一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2 ...
Week 3: Structured Types 5. Tuples and Lists Exercise: odd tuples
Exercise: odd tuples 5/5 points (graded) ESTIMATED TIME TO COMPLETE: 5 minutes Write a procedure cal ...
git命令行使用
* git branch : 查看本地分支 * git branch -r : 查看远程分支 * git branch -a : 查看全部分支 * git branch name : 本地新建分支 * ...
[转] Java：对Scanner的useDelimiter()方法的疑问
[From]https://segmentfault.com/q/1010000003885362 Windows下,我们在键盘上按下Enter键,实际上输入的是回车和换行两个字符:\r\n,ASCI ...

vue loading组件

vue loading组件的更多相关文章

随机推荐

热门专题