<a href='http://ricostacruz see this site.com/nprogress/’>NProgress提供了一种独特的线条样的进度条。

由于互联网是异步的,很多设计师往往在制作内容时不得不在内容中插入大量的进度条。然而进度条作为一种动态元素,实际上也在抢夺用户的注意力。对于网站来说,这可不是什么好事。

抛开客套话不谈,NProgress最大的特点即在于它可以将对用户的视觉影响降到最低。

如何使用

NProgress依赖于jQuery,其使用非常简单:

NProgress.start();
NProgress.done();

如果还想有更多定制,则可通过incset等方法进一步控制进度条。

一隅实现

谈到进度条,往往想到的是通过JS直接设置div的宽度来控制长度。然而NProgress内部使用了另一种有趣的实现:translate3d。通过控制元素的旋转角度来使长度与页宽一致的线条出现了从短到长的效果。使用translate3d的最大好处即在于它可以获得图形硬件加速,降低对CPU的依赖。这种通过translat3d来做网页动画的方法目前好像还蛮流行,虽然浏览器支持非常有限。

许可证

NProgress使用MIT协议进行许可。

About liuyanghejerry

富有激情的前端工程师,专注GUI开发。

3 Thoughts on “NProgress – 独特的线条进度条

  1. 但是我有个问题,前端的我们如何知道页面加载到哪里? 难道要在页面中的 上,中,下的内容里面插入 Javascript?

    • liuyanghejerry on 2013 年 10 月 23 日 at 23:46 said:

      这个主要是针对页面中的异步加载,而不是针对页面初次加载的过程。如果你需要更加智能的进度条解决方案,可以考虑pace

  2. 网站很漂亮,内容也很使用。

Post Navigation