<section class="section" id="progress">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#progress">Progress</a>
        </h1>
    </header>

{{!--   <div class="row">
<div class="col-xs-24">
    <h2>Inside a button</h2>
</div>

<div class="col-md-5">

    <button type="button" class="btn btn-primary btn-progress btn-lg">
        <span class="btn-progress-bar" role="progressbar" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100" style="width: 83%;"></span>
        <span class="btn-progress-label">Resume (83%)</span>
    </button>

</div>

<div class="col-md-18 col-md-offset-1">
    {{#markdown}}
```xml
<button type="button" class="btn btn-primary btn-progress btn-lg">
    <span class="btn-progress-bar" role="progressbar"
    aria-valuenow="83" aria-valuemin="0" aria-valuemax="100"
    style="width: 83%;"></span>
    <span class="btn-progress-label">Resume (83%)</span>
</button>
```
    {{/markdown}}
</div>
</div>
--}}

<div class="row">
    <div class="col-xs-24">
        <h3>Determinate progress bar</h3>
    </div>

    <div class="col-xs-24">
        <div style="padding:20px;">
            <div class="col-xs-24">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                        <span class="sr-only">60% Complete</span>
                    </div>
                </div>
            </div>
        </div>

        <div style="padding:20px; background-color:#000;">
            <div class="col-xs-24">
                <div class="progress theme-alt">
                    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                        <span class="sr-only">60% Complete</span>
                    </div>
                </div>
            </div>
        </div>

        <div style="padding:20px; background-color:#0078D7;">
            <div class="col-xs-24">
                <div class="progress theme-dark">
                    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                        <span class="sr-only">60% Complete</span>
                    </div>
                </div>
            </div>
        </div>
</div>

    <div class="col-md-24">
        {{#markdown}}
```xml
<div class="progress">
    <div class="progress-bar" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
    style="width: 60%;">
        <span class="sr-only">60%</span>
    </div>
</div>
```
        {{/markdown}}
    </div>
    <div class="col-md-24">
        <div class="guidance guidance-usage m-t-xs">
            {{#markdown}}
{{> progress-guidance.md}}
            {{/markdown}}
        </div>
    </div>
</div>
</section>
