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

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/

1 件のコメント:

  1. このコメントは投稿者によって削除されました。

    返信削除

ReactNativeでAndroid対応する話

前提 ReactNativeでiOS版のアプリをリリースしていて、Android版をリリースする話 トラブルシューティング Build.VERSION_CODES.Q が存在しないエラー compileSdkVersionを29以上にすると解決 メモリー足りないエラー Execu...