基于Vuejs实现 Skeleton Loading 骨架图
原文地址：https://cloud.tencent.com/developer/article/1006169
https://mp.weixin.qq.com/s/qmyn6mGrO6hRKuvKUSF8lA
https://dulinrain.github.io/css/使用Skeleton%20Screens增强网页的感知性能.html
https://codepen.io/janily/pen/rGqQgJ
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<style>
.timeline-item {
background: #fff;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: 3px;
padding: 12px;
margin: 0 auto;
max-width: 472px;
min-height: 200px;
} @keyframes placeHolderShimmer{
0% {
background-position: -468px 0
}
100%{
background-position: 468px 0
}
} .animated-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
height: 40px;
position: relative;
} .background-masker {
background: #fff;
position: absolute;
} .background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
top: 0;
left: 40px;
right: 0;
height: 10px;
} .background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
top: 10px;
left: 40px;
height: 8px;
width: 10px;
} .background-masker.header-bottom {
top: 18px;
height: 6px;
} .background-masker.subheader-left,
.background-masker.subheader-right {
top: 24px;
height: 6px;
} .background-masker.header-right,
.background-masker.subheader-right {
width: auto;
left: 300px;
right: 0;
} .background-masker.subheader-right {
left: 230px;
} .background-masker.subheader-bottom {
top: 30px;
height: 10px;
} .background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
top: 40px;
left: 0;
right: 0;
height: 6px;
} .background-masker.content-top {
height:20px;
} .background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end{
width: auto;
left: 380px;
right: 0;
top: 60px;
height: 8px;
} .background-masker.content-second-line {
top: 68px;
} .background-masker.content-second-end {
left: 420px;
top: 74px;
} .background-masker.content-third-line {
top: 82px;
} .background-masker.content-third-end {
left: 300px;
top: 88px;
}
</style>
<body>
<div id="app">
<div v-for="user in users" class="items" v-if="loading">
<user-item :name="user.name" :email="user.email"></user-item>
</div>
<div v-for="load in loades" v-if="!loading">
<loading-item></loading-item>
</div>
</div>
</body>
<script>
// https://cloud.tencent.com/developer/article/1006169
Vue.component('user-item', {
props: ['email', 'name'],
template: `<div>
<h2 v-text="name"></h2>
<p v-text="email"></p>
</div>`
}) Vue.component('loading-item', {
template: `<div class="animated-background">
<div class="background-masker header-top"></div>
<div class="background-masker header-left"></div>
<div class="background-masker header-right"></div>
<div class="background-masker header-bottom"></div>
<div class="background-masker subheader-left"></div>
<div class="background-masker subheader-right"></div>
<div class="background-masker subheader-bottom"></div>
</div>`
}) var app = new Vue({
el: '#app',
data: {
users: [],
loading: false,
loades: 10
},
methods: {
getUserDetails: function() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(result => result.json())
.then(result => {
this.users = result
this.loading = true
});
}
},
beforeMount: function() {
setTimeout(() => {
this.getUserDetails()
}, 3000);
}
});
</script>
</html>
基于Vuejs实现 Skeleton Loading 骨架图的更多相关文章
- Skeleton Screen -- 骨架屏--应用
案例:使用 现已经在支付的项目使用 用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading( ...
- Skeleton Screen — 骨架屏
用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验. Sk ...
- 最简单的基于libVLC的例子：最简单的基于libVLC的视频播放器（图形界面版）
===================================================== 最简单的基于libVLC的例子文章列表: 最简单的基于libVLC的例子:最简单的基于lib ...
- 基于Echarts的股票K线图展示
发布时间:2018-10-31 技术:javascript+html5+canvas 概述 基于echarts的股票K线图展示,只需引用单个插件,通过简单配置,导入数据,即可实现炫酷复杂的K线 ...
- 基于jQuery果冻式按钮焦点图切换代码
基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 基于js全屏动画焦点图幻灯片
今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="sl ...
- 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table
基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367
- css skeleton loading & skeleton components
css skeleton loading css & :empty See the Pen Skeleton Screen with CSS by xgqfrms (@xgqfrms) on ...
- （新手向）基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
随机推荐
- angularJs的一次性数据绑定：双冒号::
angularJs 中双冒号 ::来实现一次性数据绑定. 原文: https://blog.csdn.net/qianxing111/article/details/79971544 -------- ...
- 如何利用Framework模型生成IQD文件
很多Cognos的新手在接触Transform建模的时候对于iqd文件都有一种朦胧的感觉,当然也不必去死记硬别它的格式,下面我们就来说一下如何用Framework工具来生成iqd文件. 1:打开fra ...
- cognos report利用文本框提示优化日期维度
为了尽量减少手工对日期维度的维护,在日期维度表中年份已经到了2099年,把年份作为下拉框或者月份作为下拉框的时候,选择起来颇为麻烦(当然也可以在此基础之上设置默认为当前月) 如图:提示页面以及html ...
- Android图片与缩略
/** * 将图片文件原比例缩略.并使其不超过最大宽.高 * @param path : 图片文件 * @param requestW : 缩略后最大宽度 * @param requestH : 缩略 ...
- 嵌套循环连接(nested loops join)原理
嵌套循环连接(nested loops join) 访问次数:驱动表返回几条,被驱动表访问多少次. 驱动表是否有顺序:有. 是否要排序:否. 应用场景: 1.关联中有一个表比较小: 2.被关联 ...
- vue diff算法 patch
1.diff比较算法 图示: diff比较只会在同层级进行, 不会跨层级比较. 所以diff是:广度优先算法. 时间复杂度:O(n) 代码示例: <!-- 之前 --> <div&g ...
- Python之上下文管理器
# -*- coding: utf-8 -*- #python 27 #xiaodeng #Python之上下文管理器 #http://python.jobbole.com/82620/ #语法形式: ...
- Linux 系统文件类型
在Linux中只有一下7种文件类型 1.普通文件(-表示,可用ls -l查看) 2.目录(d)[在linux中,任何东西都被看成文件,外设备也看成文件,注意是任何东西] 3.字符设备文件(c) 4.块 ...
- Python画图matplotlib展示图中中文乱码
在用python的 matplotlib 画图的时候,在图表上面有中文乱码问题,如下的: 解决过程: 平台:windows,python2.7步骤一:打开设置文件 import matplotlib ...
- 从 高斯 到 正态分布 到 Z分布 到 t分布
正态分布是如何被高斯推导出来的, 我感觉高斯更像是猜出了正态分布. 详见这篇文章:<正态分布的前世今生> http://songshuhui.NET/archives/76501 说一说理 ...