<!--

 *

 * 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. loj #535. 「LibreOJ Round #6」花火 树状数组求逆序对+主席树二维数点+整体二分

    $ \color{#0066ff}{ 题目描述 }$ 「Hanabi, hanabi--」 一听说祭典上没有烟火,Karen 一脸沮丧. 「有的哦-- 虽然比不上大型烟花就是了.」 还好 Shinob ...

  2. redis中使用lua脚本

    lua脚本 Lua是一个高效的轻量级脚本语言,用标准C语言编写并以源代码形式开放, 其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能 使用脚本的好处 1.减少网络开销,在Lua脚 ...

  3. abp框架angular 项目docker 手动部署到Linux环境中

    1.https://aspnetboilerplate.com/Templates 2.后端项目发布,在publish中abp默认已经存在DockerFile文件 3.修改后端文件中的DockerFi ...

  4. ACM 计算几何向量

    向量 简介注意事项基本计算 加减法 ~ 示例代码 长度 ~ 示例代码 数乘 ~ 示例代码 点积 应用 ~ 示例代码 叉积 ~ 示例代码 性质与应用 经典题目 向量旋转 操作目的 模板代码 简介 向量, ...

  5. Spring对外部属性文件指定的某个属性进行加密、解密

    [From] http://blog.csdn.net/ethanq/article/details/7333897 在我们开发当中,经常会用到spring框架来读取属性文件的属性值,然后使用占位符引 ...

  6. HTML5实现多文件的上传示例代码

    [转自] http://www.jb51.net/html5/136791.html 主要用到的是<input>的multiple属性 代码如下: <input type=" ...

  7. Putty之public key ssh认证入门

    1.工作平台 客户端:Win2kEn Sp3,Putty Beta 0.53 服务器:RedHat72,OpenSSH_3.4p1 2.Putty简介 一个免费小巧的Win32平台下的ssh客户端.它 ...

  8. [V1-Team] 第一周总结

    第一周总结 写在前面 会议名称 会议时间 会议时长 会议地点 第一次周例会 2019/4/1 19:00 70min F楼2层沙发休息处 附Github仓库:WEDO 例会照片 工作情况总结 人员 上 ...

  9. 金融量化分析-python量化分析系列之---使用python获取股票历史数据和实时分笔数据

    财经数据接口包tushare的使用(一) Tushare是一款开源免费的金融数据接口包,可以用于获取股票的历史数据.年度季度报表数据.实时分笔数据.历史分笔数据,本文对tushare的用法,已经存在的 ...

  10. oracle12C--DG搭建配置

    一,主库前期操作 搭建的话和11g差不多,点点点. 两台服务器,一台主库,一台从库 01,配置主库hosts cat /etc/hosts 192.168.0.31 node12c01 192.168 ...