AngularJSでローディングバーやインジケータを出す方法

インストール

bowerでライブラリ管理している前提です。

$ bower install angular-loading-bar --save

自分の環境ではangular-animateがなかったので、
angular-animateもインストールしました。

$ bower install angular-animate --save

使い方

app.jsなどで読み込むモジュールを宣言すればOK

angular.module('myApp', ['chieffancypants.loadingBar', 'ngAnimate'])

非表示設定

インジケータやローディングバーなど非表示にしたい場合。
Safariだとオリジナルのローディンブバーとかぶってちょっとださなかったので、
ローディングバーを非表示にしました。

インジケータ非表示

angular.module('myApp', ['chieffancypants.loadingBar'])
  .config(function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.includeSpinner = false;
  })

ローディングバーの非表示

angular.module('myApp', ['chieffancypants.loadingBar'])
  .config(function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.includeBar = false;
  })

すごく簡単にライブラリの追加が簡単になってます。

このライブラリを使ったアプリはこちら

http://app.owatter.hrk-ys.net/