JavaScriptなどを使って .%{STYLEGUIDE_PAGE}-progress-bar の幅を書き換えてください。
<div class="%{STYLEGUIDE_PAGE}-progress"> <div class="%{STYLEGUIDE_PAGE}-progress-bar" style="width: 90%"> <span>通常</span> </div> </div> <div class="%{STYLEGUIDE_PAGE}-progress"> <div class="%{STYLEGUIDE_PAGE}-progress-bar %{STYLEGUIDE_PAGE}-progress-bar-info" style="width: 90%"> <span>.%{STYLEGUIDE_PAGE}-progress-bar-info</span> </div> </div> <div class="%{STYLEGUIDE_PAGE}-progress"> <div class="%{STYLEGUIDE_PAGE}-progress-bar %{STYLEGUIDE_PAGE}-progress-bar-danger" style="width: 90%"> <span>.%{STYLEGUIDE_PAGE}-progress-bar-danger</span> </div> </div> <div class="%{STYLEGUIDE_PAGE}-progress %{STYLEGUIDE_PAGE}-progress-striped"> <div class="%{STYLEGUIDE_PAGE}-progress-bar %{STYLEGUIDE_PAGE}-progress-bar-info" style="width: 90%"> <span>.%{STYLEGUIDE_PAGE}-progress-striped</span> </div> </div> <div class="%{STYLEGUIDE_PAGE}-progress %{STYLEGUIDE_PAGE}-progress-striped %{STYLEGUIDE_PAGE}-active"> <div class="%{STYLEGUIDE_PAGE}-progress-bar %{STYLEGUIDE_PAGE}-progress-bar-info" style="width: 90%"> <span>.%{STYLEGUIDE_PAGE}-active(animation)</span> </div> </div>