<!--

 *

 * 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. 使用window.name 进行数据跨域传递

    其中要点, Stpe1,浏览器在Iframe中加载一个异域的页面,这个页面返回 <script>window.name="任何数据"</script>,这时 ...

  2. Hadoop文章

    hadoop入门--简单的MapReduce案例:https://blog.csdn.net/zhangt85/article/details/42077281?utm_source=blogxgwz ...

  3. P4449 于神之怒加强版 （莫比乌斯反演）

    [题目链接] https://www.luogu.org/problemnew/show/P4449 给定n,m,k,计算 \(\sum_{i=1}^n \sum_{j=1}^m \mathrm{gc ...

  4. 静态区间第K小（整体二分、主席树）

    题目链接 题解 主席树入门题 但是这里给出整体二分解法 整体二分顾名思义是把所有操作放在一起二分 想想,如果求\([1-n]\)的第\(k\)小怎么二分求得? 我们可以二分答案\(k\), \(O(n ...

  5. POJ：2456 Aggressive cows(z最大化最小值）

    描述 农夫 John 建造了一座很长的畜栏,它包括N (2 <= N <= 100,000)个隔间,这些小隔间依次编号为x1,...,xN (0 <= xi <= 1,000, ...

  6. 执行npm install 时会报 operation not permitted,unlink......错

    问题现象:在我这项目目录中执行这命令就会报这个错. 问题原因: 后来查了查,说是 npm 5.4.0版本确实会有这个问题. https://github.com/npm/npm/issues/1828 ...

  7. HOW TO MAKE IT FLOW ?

      FLEXnet Licensing is a member of the FLEXnet Publisher family of products. It is the most popular ...

  8. java代码将excel文件中的内容列表转换成JS文件输出

    思路分析 我们想要把excel文件中的内容转为其他形式的文件输出,肯定需要分两步走: 1.把excel文件中的内容读出来: 2.将内容写到新的文件中. 举例 一张excel表中有一个表格: 我们需要将 ...

  9. [转] 一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)

    [From] http://www.cnblogs.com/lucker/p/4108838.html http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不 ...

  10. Linux下Tomcat启动报 The BASEDIR environment variable is not defined

    今天是2017年2月27.在Linux下部署Tomcat官网下载的Tomcat 8.5,结果启动startup.sh报如下错,即使只是跑version.sh也报同样的错. $ ./version.sh ...