ionicであれば、ローディング画面はすごく簡単に実装できます
$ionicLoadingを使えば、簡単に
おしゃれなローディングの画面の出来上がりです。
通信開始の時に
$ionicLoading.show({content: 'Loading',animation: 'fade-in',});
って書くだけです。ローディング画面を消すには
$ionicLoading.hide();
これだけ。通信失敗時や通信完了時に書いてあげるだけ。
angular JS + bootstrapでも、bootstrapに似たようなのがあるんだろうと
考えていましたが甘かった。無いのです。
仕方ないので、ローディングのプラグインをいくつか試してみたが、
何故か動かない。
動かなかったLoading系プラグイン
darthwade/angular-loading
Angular Loading Overlay
まぁ、環境にもよるんでしょう。私の環境では動かなかっただけかも知れません。
色々探しているうちに見つかったのが
Angular Loading Barです。
ローディングの、バーです。
画面上部にバーが表示されて、にょきにょきと伸びていきます。
存在がちょっと薄いので、もう少し派手にしたい。
せめて画面中にLoading と表示するか、spinnerでクルクル表示したい
ということでマニュアルを読み進めると、カスタムすることができるということを発覚
LoadingBarマニュアル
ちょこっといじってこんなローディング画面にしてみた
上にバーが表示されるので、ローディングのグルグルは入れませんでした（じつはめんどくさかっただけなのは内緒）
おしゃれなローディングの出来上がりです（おしゃれ？
肝心のソース
//ローディングバー loading-bar オプション
.config(function(cfpLoadingBarProvider) {
cfpLoadingBarProvider.includeSpinner = true;
cfpLoadingBarProvider.includeBar = true;
cfpLoadingBarProvider.spinnerTemplate = "<div class='urasuke'><h2 >Loading</h2><p>please wait</p></div>";
})
CSSの記述は次の通り
.urasuke{
position:absolute;
top:0;left:0;
background:#fff;
opacity:0.5;
width:100%;
height:300%;
z-index:0;
color:red;
text-align:center
}
高さ300%あたりがやっつけ感満載ですねｗ
そして、ローディング画面の表示ですが、実はloading-barは何もしなくてOKです。
$http通信が始まると勝手にローディング画面が表示されて、
通信が終了すると勝手に止まります。
動作サンプル
日報クラウドnipoで使ってます（というかnipoのコードを紹介しています）
nipoを起動してみる
アカウントは取得しないでも試せます。
「フリーIDで使用してみる」を押せば、勝手にログインして、ローディング画面がみれることでしょう
プラグインのインストール
bowerがあればめちゃ簡単
CLIから
bower install angular-loading-bar
と叩くだけです。
この辺はyeoman+bower+gruntの環境準備が必要ですが、
一度構築しちゃえばプラグインの導入が楽になります。
まるで壁のプラグにコンセントを刺すような感じで使えます。
