对于菊花图我们自不必多说，现在对于加载的设计体验有了比菊花加载体验更棒的方法，即大家常看到的Skeleton Screen Loading，中文叫做骨架屏。
所谓Skeleton Screen Loading，即表示在页面完全渲染完成之前，用户会看到一个占位的样式，用以描绘了当前页面的大致框架，加载完成后，最终骨架屏中各个占位部分将被真实的数据替换。很多项目中都有相关的应用，如饿了么h5版本、知乎、facebook等网站中都有应用。 其效果如下图所示：
iOS实现Skeleton效果的第三方库有很多，当然也可以自己创建一个，而骨架屏最核心的就是占位和属性动画。在实现方面，本文介绍几种主流的实现方式：
实现原理
对UIView进行扩展，增加skeletonable、skeletonLayer等属性。调用showSkeleton方法，对属性skeletonable为true的视图进行遍历，找到其最上层的、skeletonable为true的子View，然后创建skeletonLayer添加到上面，构成骨架图，动效效果亦是在skeletonLayer层。需要隐藏效果时，调用hideSkeleton，同样进行遍历，移除skeletonLayer。
简单的说，在显示占位的时候，将tableView的代理设置为通过某个对象，这个对象根据cell的Idenfier创建cell并添加占位显示。关闭显示占位的时候，将代理tableView的代理切回ViewController，正常显示。
特点
1、不需手动写占位控件，不需处理圆角等问题，占位效果与实际控件布局一致。
2、缺点是有的控件是自适应大小，在未获得数据之前，控件位置是错误的，导致占位效果有问题。
同样是扩展UIView，添加属性somoContainer，表示占位视图的容器视图，其中每个占位区域都是一个SomoView。对于想要显示占位效果的View，需实现协议，在协议方法中返回SomoView列表。将这些SomoView添加到somoContainer，并显示。
特点
1、避免了上述自适应控件无数据时大小不正确的问题。
2、需要手工指定每个占位区域，且每个占位区域是UIView级别，不是CALayer。
除此之外，TABAnimated也是一个被使用的比较多的，同样TABAnimated也是扩展的UIView。在ios中集成TABAnimated需要经历以下几步：
1，Install
2，第二步（可选）
可以选择在appDelegate的didFinishLaunchingWithOptions方法全局设置动画属性，设有默认属性。例如：
3，第三步，设置animatedStyle属性
在需要动画的view上，将属性animatedStyle设置为TABTableViewAnimationStart,不需要动画的view不用做额外的操作。
4，第四步
1、将需要动的组件的属性loadStyle，设置为需要的类型，不需要动的组件不用做额外的操作；
2、（可选）新增属性tabViewWidth，其为动画开启时该组件的宽度,有较为合理默认值；
5，第五步
在获取到数据后，停止动画。
示例源码链接： iOS骨架屏示例
在Android中，骨架屏的实现也后很多的第三方框架，常见的有以下几个库：
ShimmerRecyclerView是一个带有闪光和指示效果的库，其运行效果如下图：
源码地址： https://github.com/sharish/ShimmerRecyclerView
Skeleton也是一个使用得比较广泛的库，它现在使用闪存动画的内存优化版本，因此速度更快，您也可以设置更大的布局动画。
项目源码： https://github.com/ethanhua/Skeleton
spruce-android
Spruce 是一个轻量级动画库，可帮助编排屏幕上的动画，该库同时还支持 iOS。
源码地址： https://github.com/willowtreeapps/spruce-android
循环时间是3分钟。网页骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本。在页面完全渲染完成之前，用户会看到一个样式简单，描绘了当前页面的大致框架的页面，然后骨架屏中各个占位部分被实际资源完全替换，这个过程中用户会觉得内容正在逐渐加载即将呈现，降低了用户的焦躁情绪，使得加载过程主观上变得流畅。
Skeleton Screen(骨架屏) 指的在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于内容列表页。
一、page-skeleton-webpack-plugin
page-skeleton-webpack-plugin 是一款由 ElemeFE 团队开发的webpack 插件，该插件的目的是根据你项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。
二、插件自动生成骨架屏的主要原理
先demo展示一下如何自动生成骨架屏，后续再通过代码具体分析如何生成骨架屏：
安装运行环境
依赖环境：
安装puppeteer可参考：https://www.jianshu.com/p/a9a55c03f768
启动puppeteer并打开要生成骨架屏的页面
接下来分析makeSkeleton是如何生成骨架屏代码
入口代码在 page-skeleton-webpack-plugin/src/skeleton.js
初始化核心逻辑：
具体各块的骨架结构如何生成的接下来会一一分析
1、SVG块生成骨架结构
非隐藏的元素，会把 svg 元素内部所有元素删除，减少最终生成的骨架页面体积，其次，设置svg 元素的宽、高和形状等。
2、按钮块生成骨架结构
button块的处理相对比较简单，去除边框和阴影，设定好统一的背景色和文字，按钮块就处理完成了。
3、背景块生成骨架结构
背景块指有背景图或者背景色的元素。统一设置背景色即可。
4、图片块生成骨架结构
5、伪元素块处理骨架结构
6、文本块处理骨架结构
文本块相对处理起来会比较复杂些，所以放到最后来讲。
文本块定义：任何包含文本节点的元素都是文本块。
计算文本块的文本行数、文字高度（即要绘制的文本块高度=fontSize）：
通过线性渐变生成条纹背景的文本块：
单行文本需要计算文本宽度和text-aligin属性
以上就是elementUI开源的骨架屏插件的主要逻辑啦。当然还有涉及工程化相关的逻辑这里就没贴出来了，后续可以再慢慢探讨。
我抽空把生成骨架屏的逻辑单独抽出来，方便大家定制对骨架屏的工程化处理及调试
https://github.com/wookaoer/page-skeleton-core
