vue数据加载等待组件
关于loading组件的。
loading.vue
<template>
<div class="loading">
<div class="mock">数据加载中</div>
<div class="loader-inner ball-pulse">
<div></div>
<div></div>
<div></div>
</div>
</div>
</template>
<script>
export default {
data(){
return{ }
}
};
</script> <style scoped>
.loading{
position: fixed;
top: ;
left: ;
right: ;
bottom: ;
z-index:;
width: %;
height: %;
background-color: #ffffff;
opacity: 0.6;
}
.loading .mock{
height: 30px;
position: absolute;
top: %;
left: %;
transform: translateX(-%);
font-size: 25px;/*px*/
color: #03a9f4;
/*text-align: center;*/
line-height: 30px;
}
.ball-pulse{
position: absolute;
top: %;
left: %;
transform: translateX(-%);
}
.loading .ball-pulse div{
background-color: #03a9f4;
width: 30px;
height: 30px;
border-radius: %;
margin: 2px;
animation-fill-mode: both;
display: inline-block;
}
.loading .ball-pulse div:nth-child(){
animation: scale .75s -.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.loading .ball-pulse div:nth-child(){
animation: scale .75s -.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.loading .ball-pulse div:nth-child(){
animation: scale .75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)
} @-webkit-keyframes scale {
% {
-webkit-transform: scale();
transform: scale();
opacity: ;
}
% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7;
}
% {
-webkit-transform: scale();
transform: scale();
opacity: ;
}
}
@keyframes scale {
% {
-webkit-transform: scale();
transform: scale();
opacity: ;
}
% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7;
}
% {
-webkit-transform: scale();
transform: scale();
opacity: ;
}
}
</style>
vue数据加载等待组件的更多相关文章
- Vue动态加载异步组件
背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...
- vue 循环加载动态组件以及传值
今天遇到一个需求,某个页面是个动态页面,由多个子组件构成. 之前我们的做法是将N个需要的组件import进主页面,然后引用一下即可.但是现在遇到的问题是, 这个动态页面存在多个业务,有的业务需要某几个 ...
- vue 异步加载远程组件(支持编译less语法)
本代码已组件化,可以直接使用. 说明:本组件可以直接解析.vue文件,为了支持less语法解析,在组件中引入less.js,可在less官网下载. 组件代码 <template> < ...
- Esay ui数据加载等待提示
以视频上传为例: //视频上传 function uploadVedio(fileName){ load();//开始加载时弹出加载层 $.post('< ...
- iOS App中数据加载的6种方式
我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...
- APP中数据加载的6种方式-b
我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...
- App6种常见的数据加载设计
App6种常见的数据加载设计 设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载 ...
- Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可 ...
- vue 项目, 通知子组件更新,父组件中每次点击按钮重新加载子组件,(重新生成dom 元素)
vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...
随机推荐
- 1 tcp/ip协议
该协议是一个协议族,并是说具体某个协议下图中的协议都属于tcp/ip协议.他是用来规范互联网中电脑间数据传输的. 该协议可以分为4层或者7层 4层,实际层数: 链路层 网络层 传输层 应用层 7层,理 ...
- Ubuntu logomaker sh: 1: pngtopnm: not found 解决方案
暂时未找到logomaker的方法,来解决 命令替换,在文件夹: pngtopnm open_show.png > temp.ppm ppmquant 224 temp.ppm >temp ...
- OpenGL图形渲染管线、VBO、VAO、EBO概念及用例
图形渲染管线(Pipeline) 图形渲染管线指的是对一些原始数据经过一系列的处理变换并最终把这些数据输出到屏幕上的整个过程. 图形渲染管线的整个处理流程可以被划分为几个阶段,上一个阶段的输出数据作为 ...
- OpenGL(八) 显示列表
OpenGL在即时模式(Immediate Mode)下绘图时,程序中每条语句产生的图形对象被直接送进绘图流水线,在显示终端立即绘制出来.当需要在程序中多次绘制同一个复杂的图像对象时,这种即时模式会消 ...
- JAVASCRIPT高程笔记-------第八章 浏览器BOM对象
8.1 window对象--表示一个浏览器的实例 在全局作用域中声明的任何变量.函数都会变成window对象的属性和方法,与之直接定义window对象的属性的区别是 window.xxx 可以通过 ...
- ntp时间同步,各种配置方法
1 Windows xp NTP服务器的配置(2003配置方式一样) 1) 首先需要关闭作为NTP服务器的windows系统自带的防火墙,否则将同步不成功. 2) 单击“开始”,单击“运行”,键入 r ...
- C# 桌面软件开发-深入学习 [1]- AY-C#人爱学不学-aaronyang技术分享
原文:C# 桌面软件开发-深入学习 [1]- AY-C#人爱学不学-aaronyang技术分享 曾经我做office,不想依赖别人dll,就使用了 Type.GetTypeFromProgID 可以根 ...
- XML序例化工具类
Model: [XmlRoot(ElementName = "root")] public class BookModel { [XmlElement] public string ...
- oracle,sql server count函数 存储过程 判断 行数 注意事项
oralce中使用 count 函数判断 行数 需要注意 一定是count 有值的字段,接下来看一组语句 --查询数据 select * from kk_create_ka where auto_id ...
- linux安装脚本
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...