<div class="jumbotron">
  <div class="container">
    <h1>{{'PROGRESSBAR' | translate}}</h1>
    <p class="lead">{{'PROGRESSBAR-DESC' | translate}}</p>
  </div>
</div>

<div class="container">
  <div class="row">

    <div class="col-lg-3">
      <div class="list-group" affix>
          <ul class="nav">
            <a href="" smooth-scroll target="progressbar" offset="80" class="list-group-item">{{'PROGRESSBAR' | translate}}</a>
          </ul>
      </div>
    </div>

    <div class="col-lg-9">

      <section id="progressbar">

        <h1>{{'PROGRESSBAR' | translate}}</h1><hr>
        <p class="lead">{{'PROGRESSBAR-DESC2' | translate}}</p>

        <div class="panel panel-default">
          <div class="panel-body">
            <p class="text-muted"><small>EXAMPLE</small></p>
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <div class="col-sm-12">
                  <a href="" class="btn btn-info" ng-click="progressbar()">Start</a>
                </div>
              </div>
            </form>
          </div>
          <div class="panel-footer">
            <p class="text-muted"><small>CODE</small></p>
            <gist id="ae5120fb3ee80fc247a2"></gist>
          </div>
        </div>

        <h3>{{'OPTIONS' | translate}}</h3>
        <p>{{'PROGRESSBAR-TB.DESC' | translate}}</p>

        <table class="table table-bordered">
          <thead>
            <tr>
              <th>{{'OPTION' | translate}}</th>
              <th>{{'TYPE' | translate}}</th>
              <th>Default</th>
              <th>{{'DESCRIPTION' | translate}}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code>element</code></td>
              <td>String: {id | class}</td>
              <td>"body"</td>
              <td>{{'PROGRESSBAR-TB.DESCS.ELEMENT' | translate}}</td>
            </tr>
            <tr>
              <td><code>status</code></td>
              <td>String: {start | end}</td>
              <td>"start"</td>
              <td>{{'PROGRESSBAR-TB.DESCS.STATUS' | translate}}</td>
            </tr>
          </tbody>
        </table>

        <iframe height='250' scrolling='no' src='//codepen.io/alfredobarron/embed/zxBojo/?height=250&theme-id=8624' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/alfredobarron/pen/zxBojo/'>Smoke ProgressBar</a> by Alfredo Barron (<a href='http://codepen.io/alfredobarron'>@alfredobarron</a>) on <a href='http://codepen.io'>CodePen</a>.
        </iframe>

      </section>

    </div><!--/.col-lg-9 -->
  </div><!--/.row -->
</div><!-- /.container -->