# プログレスバー

JavaScriptなどを使って .%{STYLEGUIDE_PAGE}-progress-bar の幅を書き換えてください。

通常
.%{STYLEGUIDE_PAGE}-progress-bar-info
.%{STYLEGUIDE_PAGE}-progress-bar-danger
.%{STYLEGUIDE_PAGE}-progress-striped
.%{STYLEGUIDE_PAGE}-active(animation)

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