KatsuYuzuのブログ

.NET の開発をメインとした日記です。

angularjsで通信中に自動的に読み込みバー、くるくるを表示してくれるAngular Loading Bar

angularjsで通信中に自動的に読み込みバー、くるくるを表示してくれるAngular Loading Bar。youtubeで画面上を走る赤いバーのアレ。
f:id:KatsuYuzu:20150623004800g:plain

環境

  • TypeScript 1.4
  • AngularJS 1.4.1
  • angular-loading-bar 0.8.0

Angular Loading Bar

モジュールを読み込むだけで$httpに連動してバーを走らせてくれます。

angular.module("app", ["angular-loading-bar"])

オプションでくるくるのオンオフ、通信が十分に早い時にバーがうるさくならないようにレイテンシーの閾値設定も。

angular.module("app", ["angular-loading-bar"])
    .config(
    ["cfpLoadingBarProvider", (cfpLoadingBarProvider: any) => {
        cfpLoadingBarProvider.includeSpinner = false;
        cfpLoadingBarProvider.latencyThreshold = 0;
    }])

ソース

github.com

勉強会で紹介しました

clrh.connpass.com