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是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...
随机推荐
- 用 Expression Blend 创建酷炫的 Button
原文:用 Expression Blend 创建酷炫的 Button 原文:Creating "Cool" Buttons with Expression Blend Author ...
- Android TV开发中所有的遥控器按键监听及注意事项,新增home键监听
原文:Android TV开发中所有的遥控器按键监听及注意事项,新增home键监听 简单记录下android 盒子开发遥控器的监听 ,希望能帮到新入门的朋友们 不多说,直接贴代码 public cla ...
- HDU 4357 String change 法冠军
意甲冠军: 鉴于a串b串,问我们能否a变b串 办法:自选a的2快报,ascil+=1 然后交换位置,能够操作自如倍. 3个月3以上就能T^T 2法官将着眼于暴力 #include <cstdio ...
- SecureCRT循环检查设备状态
1: #$language = "VBScript" 2: #$interface = "1.0" 3: 4: ' This automatically gen ...
- WinForm和WPF颜色对象的转换
原文:WinForm和WPF颜色对象的转换 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/huangli321456/article/details ...
- 移花接木:借助 IViewLocationExpander 更换 ASP.NET Core View Component 视图路径
端午节在家将一个 asp.net 项目向 asp.net core 迁移时遇到了一个问题,用 view component 取代 Html.RenderAction 之后,运行时 view compo ...
- jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单
jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = ...
- mysql主从配置及其读写分离
mysql主从配置意思就是一个主mysql服务器,一个从mysql服务器,一共要用到两台服务器.主服务器新增一个账号专门让从服务器来访问同步工作,主从配置完成后,主服务器主要就是新增和update操作 ...
- 专门用于消息回调窗口的窗口标识HWND_MESSAGE(创建一个非可视、没有z-order的窗口)
HWND_MESSAGE Message-Only Windows A message-only window enables you to send and receive messages. It ...
- 【C#】list 去重
原文:[C#]list 去重 Enumerable.Distinct 方法 是常用的LINQ扩展方法,属于System.Linq的Enumerable方法,可用于去除数组.集合中的重复元素,还可以自定 ...