Pace.js

Pace.js とはプログレスバーを付けるための JS ライブラリです。

JS ファイルを読み込んで、決められたCSSを追記するだけでお手軽に、いい感じのプログレスバーを付けてくれます。

問題

ところが、デフォルトの挙動では Ajax 通信で POST リクエストした際にプログレスバーを出してくれません。

解決策

調べてみたら次のような記述を発見。

You can choose what pace tracks by setting the options. By default pace only tracks GET requests.
paceOptions = {
   ajax: {
         trackMethods: ['GET', 'POST', 'DELETE', 'PUT', 'PATCH']
   }
}

これを参考にして JS ファイルに次の1行を追記してあげたところ、無事に出てきました。

// POST の Ajax 通信でもプログレスバーを表示する
Pace.options.ajax.trackMethods = ['GET', 'POST'];