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

随机推荐

SQL SERVER下有序GUID和无序GUID作为主键&聚集索引的性能表现
背景前段时间学习<Microsoft SQL Server 2008技术内幕:T-SQL查询>时,看到里面关于无序GUID作为主键与聚集索引的建议,无序GUID作为主键以及作为聚集索引 ...
[HEOI2012]采花树状数组 BZOJ 2743
题目描述萧薰儿是古国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花. 花园足够大,容纳了n朵花,花有c种颜色(用整数1-c表示),且花是排成一排的,以便于 ...
【Leedcode】Insertion Sort List
Sort a linked list using insertion sort. /** * Definition for singly-linked list. * struct ListNode ...
ubuntu 18.04 修改固定ip
Linux(ubuntu)下固定IP的方法写在前面,问:为什么要固定ip.答:要知道固定IP的好处多多,随意搬动,固定共享地址,不怕断网等等首先,我们要选取一个局域网内的IP,方法如下: 1. ...
IIS 配置 url 重写...
<?xml version="1.0"?> <configuration> <system.webServer> <rewrite> ...
python学习，day2：列表的使用，增删改合并等
# coding=utf-8 # Author: RyAn Bi names = ['A','B','C','D'] print(names) print(names[0]) #从0开始记录 prin ...
redis设置允许远程连接
#redis默认只允许本地访问# #根据自己的配置文件启动,linux环境下同理# #远程访问的话需要设置配置文件,在redis安装根目录下xxx.config# #修改三个地方# 地址绑定保护模式 ...
HDU 6189 Law of Commutation(规律)
题意: 给定n,a,求区间 [ 1 , 1<<n ] 的数b 满足的个数分析:打出暴力程序可以发现当a为奇数的时候结果为一: 当a为偶时 , a^b=2^(k+b)mod 2^n ; ...
UVA - 10125 哈希
题意:求集合中最大的\(d\)使得\(a+b=d-c\) 学习一下哈希的姿势(原来所谓链地址法就是直接跑个图啊) 哈希真有趣,全靠xjb乱搞就叫这套hash为xjb-fibonacci-lpy-ha ...
Spring中如何向 Bean注入系统属性或环境变量
[转自] http://unmi.cc/spring-injection-system-properties-env/ 在 Spring 中为 javabean 注入属性文件中的属性值一般人都知道的, ...

vue loading组件

vue loading组件的更多相关文章

随机推荐

热门专题