Loaders.css:以性能为中心的纯CSS加载动画的集合

2020-02-01大约10分钟

大家都知道,网页在加载新内容的时候,会通常显示一个Loading动画做为一个过渡,让用户知道界面没有卡死或没有反应,安心地等待内容出现。

在实现的时候,一般会放一个.gif格式的动画图片,或者用JavaScript实现一个动画效果。用纯CSS实现也是可以的,但往往由于各种原因导致难以达到预期的效果,比如:

  1. 动画效果比较小众,有经验的开发人员对CSS动画效果可能也不熟悉

  2. 某些CSS属性需要很多高昂的画图、布局的计算,容易造成性能问题

  3. JS动态控制样式更容易

因此,真正用CSS实现的加载动画并不是很多。而用JS实现,通常会占用JS运行的计算资源,当JS在进行耗费CPU计算的数据序列化等计算操作时,加载动画的动画效果就会出现不连贯、卡顿等现象,影响用户的体验。用Gif图片实现的话,好处是可以利用到GPU加速,缺点也很明显,比如Gif只支持256种颜色,需要额外的HTTP请求来加载这个图片,等等问题。

用CSS3实现加载动画的话,就能避免上面提到的两种技术出现的问题了:

  1. 浏览器也能对CSS3进行GPU加速,不易卡顿;

  2. 加载动画的CSS只是整个网页CSS的一部分,不需要额外的HTTP请求;

  3. CSS的体积很小,一般比图片小很多,节省带宽资源;

  4. 不需要专门的技能来制作Gif图片,只需要写CSS就行。

但写好加载动画动画不是个容易的事,因此,有人就专门做了这个事,创建了一个开源项目Loaders.css,在这个项目里,提供了数十个常见的CSS加载动画,方便大家使用。这里是一个Demo页面:链接。(由于防火墙的限制,你可能看不到具体的动画内容,因此,这是一个截图,方便你来了解这个项目):

图片

Loaders.css故名思意提供的代码是一个CSS文件,可以直接加载到自己的代码里。不过这样不好的地方是,即使你只用了一个动画,也要加载所有的动画内容。因此,使用的时候,建议使用源代码里的SCSS文件,只把用到的动画代码合并到自己的CSS里面去。

这个项目中提供的加载动画最低支持IE11浏览器,一般情况下可以满足大部分网站的需求。

另外,这个项目也提供了一些其他相关项目的链接,这样你就可以更方便地在基于React、Vue、Angular、Ember、iOS或Andorid代码里用了。