[Rails]bootstrapでプログレスバーを実装する

##はじめに
今回はbootstrapでプログレスバーの実装に挑戦しました。
bootstrapなんだからコピペで実装できるやろ！っと思ってたんですが、自分が思った通りの表示ができなかったり、追加で指定しないといけないプロパティがあったので簡単ですが、まとめました。

よろしくお願いします。

##プログレスバーの実装

プログレスバーで進捗記録によって今自分が何%の進捗状況なのかわかるような機能を実装したくて挑戦してみました。
↓こんなのを作ろうとしてます。

もちろんbootstrapを利用しているので非常に簡単に実装できたのですが、少し引っかかりました。
↓こちらのチートシートを利用しました
https://hackerthemes.com/bootstrap-cheatsheet/#progress__height

私は、progress-bar-with labelというのを使いました。
ソースコードがこちら↓

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

このままコピペしたのですが、全然出てこなかったです。
なんだこりゃと思い検証ツールでブラウザを確認してみると、一応存在はしていました。
横幅が0だったので、これが原因かなと思いまして、CSSでクラス名progressにwidth: 80%を指定してあげたら、ちゃんと表示されるようになりました！

さてここからが、問題でした。
このコードでは25%のプログレスバーしか使えません。要は、styleとaria-valuenowのところに変数を利用し、汎用的に表示させたいということです。

私はdivタグの中でrubyは使えないと勝手に思い込んでいたのでめちゃくちゃ悩みました。
実はdivタグ内でも＜％＝　％＞で囲めば使えるみたいです。

結果このようなコードになりました。↓

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow=<%= @progress_percent.to_s %> aria-valuemin="0" aria-valuemax="100" style=<%= "width:" + @progress_percent.to_s + "%;" %>> <%= @progress_percent.floor %>% </div>
</div>

すごい変な感じですがこれで表示することができました！
divの中に変数と％を記述することでバーの中に今何%なのか数値を表示させることもできました。

##最後に
実はプログレスバーは何回も失敗して打ちのめされてコード全消しみたいなことをずっとやってました。
今回bootstrapというチート技を使いましたが、実装できてめちゃくちゃ嬉しいです。変数を使って汎用的に使えるようにするのは結果的に少し工夫するだけでできましたが、ここまでたどり着くのは苦労しました 笑