angular JS loading画面

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画面

おしゃれなローディングの出来上がりです(おしゃれ?
肝心のソース

//ローディングバー 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%あたりがやっつけ感満載ですねw

そして、ローディング画面の表示ですが、実はloading-barは何もしなくてOKです。
$http通信が始まると勝手にローディング画面が表示されて、
通信が終了すると勝手に止まります。

動作サンプル

日報クラウドnipoで使ってます(というかnipoのコードを紹介しています)
nipoを起動してみる
アカウントは取得しないでも試せます。
「フリーIDで使用してみる」を押せば、勝手にログインして、ローディング画面がみれることでしょう

プラグインのインストール

bowerがあればめちゃ簡単
CLIから
bower install angular-loading-bar
と叩くだけです。
この辺はyeoman+bower+gruntの環境準備が必要ですが、
一度構築しちゃえばプラグインの導入が楽になります。
まるで壁のプラグにコンセントを刺すような感じで使えます。