项目要不要加载loading状态通常是在项目完成后才考虑的事情，当然，有时候直接就不考虑了。
开发人员的职责不只是提高性能，同时优化网络差时，请求接口缓慢导致的页面的慢渲染也是非常重要的。
速度的错觉
随着我们对移动体验的期望的变化，我们对性能的理解也在变化。我们期望，无论当前的网络如何，web页面都能像原生应用程序一样顺滑，一样快速响应。
骨架屏的出现。这个想法使得用户更有耐心，因为他们知道正在发生什么，并且在内容实际存在之前能够预测内容，那么他们会认为系统更快。这在很大程度上保持了用户等待的热情。
骨架屏
这个概念可能包括显示文本，图像或其他内容元。可以在网上可以看到骨架屏的使用已经非常广泛，Facebook，Google，Slack等公司都在使用。
每当有人从服务器请求新内容时，您可以立即开始显示骨架，同时在后台加载数据。内容准备就绪后，只需将骨架换成实际卡即可。
您可以使用图像来显示骨架，但这会引入额外的请求和数据开销。我们本身已经在这里加载了东西，所以还要去等待另一个图像先加载，这可不是一个好主意。另外图片不是响应式的，如果我们决定调整卡片的样式，我们将不得不更改骨架图像，以便它们再次匹配。
一个更好的解决方案是只用CSS创建骨架屏。没有额外的请求，最小的开销。而且以后修改更加的方便快捷。
CSS中绘制骨架
首先，我们需要绘制构成卡片骨架的基本形状。
我们可以通过向background-image属性添加不同的渐变来做到这一点。默认情况下，线性渐变从上到下运行，具有不同的颜色过渡。如果我们只定义一个色标，其余的保持透明，我们就可以绘制形状。
请记住，多个背景图像在这里堆叠在一起，因此顺序很重要。 一个渐变定义将展示在后面， 定义的展示在前面。
.skeleton{
background-repeat:no-repeat;
background-image:
/*layer2:avatar*/
/*whitecirclewith16pxradius*/
radial-gradient(circle16px,white99%,transparent0),
/*layer1:title*/
/*whiterectanglewith40pxheight*/
linear-gradient(white40px,transparent0),
/*layer0:cardbg*/
/*grayrectanglethatcoverswholeelement*/
linear-gradient(gray%,transparent0);
}
这些元素通过拉伸来填充整个空间，就像常规的块级元素一样。如果我们想要改变它，我们必须为它们定义明确的尺寸。background-size的值来设置每个图层的宽度和高度，background-size的值的顺序保持我们使用的background-image顺序相同
.skeleton{
background-size:
32px32px,/*头像*/
px40px,/*标题*/
%%;/*卡片背景*/
}
一步是将元素定位在卡片上。这与position:absolute类似，跟它的left和top属性的值一样。例如：我们可以给头像和标题模拟padding：24px，以匹配真实卡片的外观。
.skeleton{
background-position:
24px24px,/*头像*/
24pxpx,/*标题*/
00;/*卡片背景*/
}
使用自定义属性
如果我们想构建一些稍微复杂一点的东西，CSS很快就会变得混乱并且很难阅读。如果将代码交给其他开发人员，他们将不知道所有这些神奇数字的来源。维护它肯定会很糟糕。
值得庆幸的是，我们现在可以使用CSS自定义属性,以更简洁、对开发人员更友好的方式来编写骨架样式。
.skeleton{
/*
defineasseparateproperties
*/
--card-height:px;
--card-padding:24px;
--card-skeleton:linear-gradient(grayvar(--card-height),transparent0);
--title-height:32px;
--title-width:px;
--title-position:var(--card-padding)px;
--title-skeleton:linear-gradient(whitevar(--title-height),transparent0);
--avatar-size:32px;
--avatar-position:var(--card-padding)var(--card-padding);
--avatar-skeleton:radial-gradient(
circlecalc(var(--avatar-size)/2),
white99%,
transparent0
);
/*
nowwecanbreakthebackgroundup
intoindividualshapes
*/
background-image:
var(--avatar-skeleton),
var(--title-skeleton),
var(--card-skeleton);
background-size:
var(--avatar-size),
var(--title-width)var(--title-height),
%%;
background-position:
var(--avatar-position),
var(--title-position),
00;
}
这不仅更具可读性，而且以后更改一些值也更容易。另外，我们可以使用一些变量（像--avatar-size、--card-padding等）来定义实际卡片的样式，并始终使其与骨架版本保持同步。
添加一个媒体查询来调整不同断点的部分骨架现在也很简单：
mediascreenand(min-width:47em){
:root{
--card-padding:32px;
--card-height:px;
}
}
浏览器对自定义属性的支持很好，但不是%。基本上，所有现代浏览器都支持，IE/Edge有点晚了。对于这个特定的用例，很容易使用Sass变量添加回退。
添加动画
为了使它更好，我们可以为我们的骨架设置动画，让它看起来更像一个加载指示器。我们需要做的就是在顶层放置一个新的渐变，然后用
keyframes.这是完成骨架卡外观的完整示例：
可以查看预览：