<!--** 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>

转载于:https://www.cnblogs.com/lwj820876312/p/10003870.html

vue loading组件相关推荐

  1. (vue)在ajax获取数据时使用loading组件不起作用

    问题描述: 在用ajax获取数据时 页面没有变化,想用一个loading图标在获取数据时显示,获取完成后隐藏 整个系统用到了vue框架,在执行sure方法时调用ajax函数 sure() {conso ...

  2. vue 添加全局组件_自定义vue全局组件(Loading为例)

    首先创建一个项目 vue init webpack-simple define-demo //define-demo 项目名称 cd define-demo npm install //安装本次所有需 ...

  3. vue 项目中使用 Loading 组件

    当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间. 如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中 <template>< ...

  4. 7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型

    本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...

  5. Vue异步组件Demo

    Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...

  6. ajax插件库,03.vue-ajax、vue UI 组件库

    vue-ajax vue 项目中常用的 2 个 ajax 库 vue-resource: vue 插件, 非官方库, vue1.x 使用广泛 axios: 通用的 ajax 请求库, 官方推荐, vu ...

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

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

  8. vue3.x全局toast、message、loading组件

    vue3.x全局toast.message.loading组件 Toast组件 loading Toast组件 在 src/components下创建toast文件夹,并依此创建index.vue和i ...

  9. vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件

    使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreat ...

  10. element-ui clearable 不显示_从ElementUI的loading组件说起

    原文地址: 从ElementUI的loading组件说起​alfxjx.github.io 前言 最近发现自己的主页首屏加载很慢,于是想用一个loading组件掩饰一下,这一下就来到了知识的荒原,对插 ...

最新文章

  1. Silverlight学习笔记之使用TranslateTransform控制对象位置
  2. Linux2.6内核 -- 编码风格（1）
  3. python 非法字符处理
  4. g++ vscode 环境选择_Visual Studio Code 配置C/C++环境
  5. YbtOJ#20078-[NOIP2020模拟赛B组Day7]路径之和【分治,Flody】
  6. 简单公司主页HTML5模板
  7. 吴裕雄 python 机器学习——多项式贝叶斯分类器MultinomialNB模型
  8. C均值聚类算法及其实现
  9. 运用递归的方法求解对称三对角矩阵的特征值——matlab实现
  10. pyinstaller编译报错 IsADirectoryError: [Errno 21] Is a directory
  11. 从技术新趋势到云原生应用开发，云计算下一个十年将走向何方
  12. poco库开发mysql_Poco数据库操作
  13. CoffeeScript 详解
  14. java options设置_JAVA_TOOL_OPTIONS和_JAVA_OPTIONS
  15. iPad浏览器HTML5性能测试
  16. python xy 官网_pythonxy 安装
  17. Flutter：WebView和H5通信
  18. 谷歌大脑新优化器VeLO火了！让AI自己调整超参数，自适应不同任务，83个任务训练加速比经典Adam更快！...
  19. php海报/合同图片生成类
  20. CIL----公共中间语言

热门文章

  1. 用友t+畅捷通使用方法_【财务人员必看干货】用友财务软件使用方法和快捷键大全！...
  2. 计算机硬件 中级证,计算机硬件组装与教学方法计算机应用中级职称论文
  3. shortest path problem
  4. java aapt linux_Android：linux下aapt使用 | 学步园
  5. python中元组和列表的区别_Python 序列：列表、元组
  6. 打断点是什么意思_英语微课堂：“Give me a break”是什么意思呢？
  7. python 遗传算法 agv_遗传算法在AGV的路径规划中的应用
  8. MATLAB--二分法
  9. 程序员Java代码不会写,菜鸡程序员都是怎样写代码的？
  10. CNN卷积神经网络(二)