知乎專欄頂部的藍色載入進度條實現原理是什麼？

01-06

RT:
我看了下代碼，沒看出什麼名堂。
是根據什麼的載入進度？

是使用了 NProgress，不過這不重要。

如何做，配置就好

app.run ($rootScope) -&> $rootScope.$on "$routeChangeStart", -&> // start progress


  $rootScope.$on "$routeChangeError", -&>

    // complete progress

$rootScope.$on "$routeChangeSuccess", -&> // complete progress

準確性，資源載入如何與 Route 事件關聯起來？

確保在 Route 上配置 resolve 參數，它使 routeChangeSuccess 事件在 resolve 提供的各個 Promise 對象狀態改變之後才觸發。

$routeProvider.when "/:column/:post", controller: "PostViewCtrl" resolve: post: -&> postPromise

體驗有關

為什麼選擇這個樣子的進度條：New UI Pattern: Website Loading Bars · UsabilityPost

為什麼開始看起來載入很多並且比較快：How to Make Progress Bars Feel Faster to Users

代碼是 Angular.js 的。

我看了一下，應該是用了 NProgress: slim progress bars in JavaScript，我自己的博客也在用這個，蠻好的~~~不過功能比較純粹，就是載入指示，不如 @Roc Ho 提到的那個涵蓋了很多其他功能

樓上兩位已經說到點子上了，pace和nprogress，感覺上nprogress要強大一些

XmlHttpRequest2有報告進度功能，有個叫PACE的類庫可以幫你做這種事情。