<!--

 *

 * 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组件的更多相关文章

  1. vue——loading组件

    <template> <div class="loading" :style="{height:loadingRadiusVal+'px',width: ...

  2. VUE移动端音乐APP学习【四】：scroll组件及loading组件开发

    scroll组件 制作scroll 组件,然后嵌套一个 DOM 节点,使得该节点就能够滚动.该组件中需要引入 BetterScroll 插件. scroll.vue: <template> ...

  3. Vue 封装的loading组件

    <template> <div class="loadEffect"> <span></span> <span>< ...

  4. 浅尝Vue.js组件(二)

    本篇目录: 插槽(Slot) 插槽内容 作用域 具名插槽 作用域插槽 独占默认插槽的缩写语法 解构插槽Prop 使用场景举例 动态插槽名 具名插槽缩写 动态组件&keep-alive 异步组件 ...

  5. 自定义vue全局组件use使用

    自定义一个全局Loading组件,并使用:总结目录:|-components |-loading |-index.js 导出组件,并且install |-loading.vue 定义Loading组件 ...

  6. vue封装组件的正确方式-封装类似elementui的组件

    最近读了下element的源码,仿照他封装了两种不同的组件. 第一种:通过组件来调用显示的 <template> <!--src/component/custom/main.vue- ...

  7. 自定义vue全局组件use使用(解释vue.use()的原理)

    我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...

  8. vue2.0 仿手机新闻站（五）全局的 loading 组件

    1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...

  9. [Loading Component]Loading组件的v-model设计是否不合理？

    vue在2.4.2版本中给computed里的属性加了限制,详见assigning to a computed property without setter does not fail 项目将vue ...

随机推荐

  1. GCD BZOJ2818 [省队互测] 数学

    题目描述 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. 输入输出格式 输入格式: 一个整数N 输出格式: 答案 输入输出样例 输入样例#1: 复制 4 ...

  2. CF702F T-Shirts FHQ Treap

    题意翻译 题目大意: 有n种T恤,每种有价格ci和品质qi.有m个人要买T恤,第i个人有vi元,每人每次都会买一件能买得起的qi最大的T恤.一个人只能买一种T恤一件,所有人之间都是独立的.问最后每个人 ...

  3. Spring Eureka的使用入门--服务端与客户端

    接上篇: Eureka作为注册中心,连接服务端与客户端: 服务端: 依赖包: apply plugin: 'org.springframework.boot' apply plugin: 'io.sp ...

  4. python shell 清屏(window)

    IDLE增加一个清屏的扩展ClearWindow就可以了(在Issue 6143: IDLE中可以看到这个扩展的说明) 安装使用的方法 1.下载ClearWindow.py(右击-目标另存为,格式为p ...

  5. POJ_2492 A Bug's Life 【并查集】

    一.题面 POJ2492 二.分析 并查集判断类别的题目感觉套路都差不多. 还是先判断在不在一个集合里,在一个集合里才能判断是否同类. 若不在一个集合里则需要将这两个点联系起来. 关于联系起来后关系的 ...

  6. artDialog不能拖拽的问题

    需要引用下面这个文件: https://github.com/aui/artDialog/edit/master/dist/dialog-plus.js

  7. C# 字符串操作，可空类型，文档注释，嵌套类型

    字符串 字符串是Unicode字符串数组,且是不可变的 这种操作不会影响到原来的字符串,它会新添加一个副本. 有关Split的操作 using System; using System.Collect ...

  8. Codeforces - 617E 年轻人的第一道莫队

    我对莫队算法最为纠结的地方就是区间端点处,应该是像代码里那样理解吧 cnt[i]表示i出现的次数 maxn开2e6比较保险 /*H E A D*/ struct Query{ int l,r,id; ...

  9. js正则表达式基本语法

    正则表达式基本语法 两个特殊的符号'^'和'$'.他们的作用是分别指出一个字符串的开始和结束. 例子如下: "^The":表示所有以"The"开始的字符串(&q ...

  10. switch case 注意事项+1 及 case合并综合练习例子

    case可以合并: 练习11:根据输入的星期,得到具体每天做的事情.星期一学习,星期二学习,星期三自习,星期四学习,星期五自习,星期六学习,星期日学习 class Switch02{ public s ...