{{#> base }}
{{> AppSidebar/sidebar components-progress-bar=this }}
<div class="app-main__outer">
    <div class="app-main__inner">
        {{> AppMain/page-title }}
        <div class="row">
            <div class="col-md-6">
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h5 class="card-title">Basic</h5>
                        <div class="text-center">0%</div>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                aria-valuemax="100" style="width: 0%;"></div>
                        </div>
                        <div class="text-center">25%</div>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;"></div>
                        </div>
                        <div class="text-center">50%</div>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                                aria-valuemax="100" style="width: 50%;"></div>
                        </div>
                        <div class="text-center">75%</div>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0"
                                aria-valuemax="100" style="width: 75%;"></div>
                        </div>
                        <div class="text-center">100%</div>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                                aria-valuemax="100" style="width: 100%;"></div>
                        </div>
                        <div class="text-center">Multiple bars</div>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0"
                                aria-valuemax="100" style="width: 15%;"></div>
                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="30" aria-valuemin="0"
                                aria-valuemax="100" style="width: 30%;"></div>
                            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;"></div>
                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                aria-valuemax="100" style="width: 20%;"></div>
                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="5" aria-valuemin="0"
                                aria-valuemax="100" style="width: 5%;"></div>
                        </div>
                    </div>
                </div>
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h5 class="card-title">Progress bar labels</h5>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;">25%</div>
                        </div>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                                aria-valuemax="100" style="width: 50%;">1/2</div>
                        </div>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0"
                                aria-valuemax="100" style="width: 75%;">You're almost there!</div>
                        </div>
                        <div class="mb-3 progress">
                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100"
                                aria-valuemin="0" aria-valuemax="100" style="width: 100%;">You did it!</div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0"
                                aria-valuemax="100" style="width: 15%;">Meh</div>
                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="30" aria-valuemin="0"
                                aria-valuemax="100" style="width: 30%;">Wow!</div>
                            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;">Cool</div>
                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                aria-valuemax="100" style="width: 20%;">20%</div>
                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="5" aria-valuemin="0"
                                aria-valuemax="100" style="width: 5%;">!!</div>
                        </div>
                    </div>
                </div>
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h5 class="card-title">Progress bar max</h5>
                        <div class="text-center">1 of 5</div>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="0"
                                aria-valuemax="5" style="width: 20%;"></div>
                        </div>
                        <div class="text-center">50 of 135</div>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                                aria-valuemax="135" style="width: 37.037%;"></div>
                        </div>
                        <div class="text-center">75 of 111</div>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0"
                                aria-valuemax="111" style="width: 67.5676%;"></div>
                        </div>
                        <div class="text-center">463 of 500</div>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="463" aria-valuemin="0"
                                aria-valuemax="500" style="width: 92.6%;"></div>
                        </div>
                        <div class="text-center">Various (40) of 55</div>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0"
                                aria-valuemax="55" style="width: 9.09091%;">5</div>
                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="15" aria-valuemin="0"
                                aria-valuemax="55" style="width: 27.2727%;">15</div>
                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0"
                                aria-valuemax="55" style="width: 18.1818%;">10</div>
                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="10" aria-valuemin="0"
                                aria-valuemax="55" style="width: 18.1818%;">10</div>
                        </div>
                    </div>
                </div>
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h5 class="card-title">Progress bar striped</h5>
                        <div class="mb-3 progress">
                            <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="10"
                                aria-valuemin="0" aria-valuemax="100" style="width: 10%;"></div>
                        </div>
                        <div class="mb-3 progress">
                            <div class="progress-bar bg-success progress-bar-striped" role="progressbar"
                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                        </div>
                        <div class="mb-3 progress">
                            <div class="progress-bar bg-info progress-bar-striped" role="progressbar" aria-valuenow="50"
                                aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
                        </div>
                        <div class="mb-3 progress">
                            <div class="progress-bar bg-warning progress-bar-striped" role="progressbar"
                                aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
                        </div>
                        <div class="mb-3 progress">
                            <div class="progress-bar bg-danger progress-bar-striped" role="progressbar"
                                aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="10"
                                aria-valuemin="0" aria-valuemax="100" style="width: 10%;"></div>
                            <div class="progress-bar bg-success progress-bar-striped" role="progressbar"
                                aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
                            <div class="progress-bar bg-warning progress-bar-striped" role="progressbar"
                                aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div>
                            <div class="progress-bar bg-danger progress-bar-striped" role="progressbar"
                                aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h5 class="card-title">Sizing</h5>
                        <div class="progress-bar-sm mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                aria-valuemax="100" style="width: 0%;"></div>
                        </div>
                        <div class="progress-bar-sm mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;"></div>
                        </div>
                        <div class="progress-bar-sm mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                                aria-valuemax="100" style="width: 50%;"></div>
                        </div>
                        <div class="progress-bar-sm mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0"
                                aria-valuemax="100" style="width: 75%;"></div>
                        </div>
                        <div class="progress-bar-sm mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                                aria-valuemax="100" style="width: 100%;"></div>
                        </div>
                        <div class="progress-bar-sm progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0"
                                aria-valuemax="100" style="width: 15%;"></div>
                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="30" aria-valuemin="0"
                                aria-valuemax="100" style="width: 30%;"></div>
                            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;"></div>
                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                aria-valuemax="100" style="width: 20%;"></div>
                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="5" aria-valuemin="0"
                                aria-valuemax="100" style="width: 5%;"></div>
                        </div>
                        <div class="divider"></div>
                        <div class="progress-bar-xs mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                aria-valuemax="100" style="width: 0%;"></div>
                        </div>
                        <div class="progress-bar-xs mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;"></div>
                        </div>
                        <div class="progress-bar-xs mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                                aria-valuemax="100" style="width: 50%;"></div>
                        </div>
                        <div class="progress-bar-xs mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0"
                                aria-valuemax="100" style="width: 75%;"></div>
                        </div>
                        <div class="progress-bar-xs mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                                aria-valuemax="100" style="width: 100%;"></div>
                        </div>
                        <div class="progress-bar-xs progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0"
                                aria-valuemax="100" style="width: 15%;"></div>
                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="30" aria-valuemin="0"
                                aria-valuemax="100" style="width: 30%;"></div>
                            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;"></div>
                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                aria-valuemax="100" style="width: 20%;"></div>
                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="5" aria-valuemin="0"
                                aria-valuemax="100" style="width: 5%;"></div>
                        </div>
                    </div>
                </div>
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h5 class="card-title">Rounded</h5>
                        <div class="progress-bar-rounded mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                aria-valuemax="100" style="width: 0%;"></div>
                        </div>
                        <div class="progress-bar-rounded mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;"></div>
                        </div>
                        <div class="progress-bar-rounded mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                                aria-valuemax="100" style="width: 50%;"></div>
                        </div>
                        <div class="progress-bar-rounded mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0"
                                aria-valuemax="100" style="width: 75%;"></div>
                        </div>
                        <div class="progress-bar-rounded mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                                aria-valuemax="100" style="width: 100%;"></div>
                        </div>
                        <div class="progress-bar-rounded progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0"
                                aria-valuemax="100" style="width: 15%;"></div>
                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="30" aria-valuemin="0"
                                aria-valuemax="100" style="width: 30%;"></div>
                            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;"></div>
                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                aria-valuemax="100" style="width: 20%;"></div>
                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="5" aria-valuemin="0"
                                aria-valuemax="100" style="width: 5%;"></div>
                        </div>
                    </div>
                </div>
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h5 class="card-title">Progress color</h5>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0"
                                aria-valuemax="100" style="width: 10%;"></div>
                        </div>
                        <div class="mb-3 progress">
                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;"></div>
                        </div>
                        <div class="mb-3 progress">
                            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                                aria-valuemax="100" style="width: 50%;"></div>
                        </div>
                        <div class="mb-3 progress">
                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0"
                                aria-valuemax="100" style="width: 75%;"></div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                                aria-valuemax="100" style="width: 100%;"></div>
                        </div>
                    </div>
                </div>
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h5 class="card-title">Progress bar multi</h5>
                        <div class="text-center">Plain</div>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0"
                                aria-valuemax="100" style="width: 15%;"></div>
                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                aria-valuemax="100" style="width: 20%;"></div>
                            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;"></div>
                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                aria-valuemax="100" style="width: 20%;"></div>
                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="15" aria-valuemin="0"
                                aria-valuemax="100" style="width: 15%;"></div>
                        </div>
                        <div class="text-center">With Labels</div>
                        <div class="mb-3 progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0"
                                aria-valuemax="100" style="width: 15%;">Meh</div>
                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="35" aria-valuemin="0"
                                aria-valuemax="100" style="width: 35%;">Wow!</div>
                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;">25%</div>
                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;">LOOK OUT!!</div>
                        </div>
                        <div class="text-center">Stripes and Animations</div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="15"
                                aria-valuemin="0" aria-valuemax="100" style="width: 15%;">Stripes</div>
                            <div class="progress-bar progress-bar-animated bg-success progress-bar-striped"
                                role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"
                                style="width: 30%;">Animated Stripes</div>
                            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;">Plain</div>
                        </div>
                    </div>
                </div>
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h5 class="card-title">Progress animated</h5>
                        <div class="mb-3 progress">
                            <div class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar"
                                aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"></div>
                        </div>
                        <div class="mb-3 progress">
                            <div class="progress-bar progress-bar-animated bg-success progress-bar-striped"
                                role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"
                                style="width: 25%;"></div>
                        </div>
                        <div class="mb-3 progress">
                            <div class="progress-bar progress-bar-animated bg-info progress-bar-striped"
                                role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"
                                style="width: 50%;"></div>
                        </div>
                        <div class="mb-3 progress">
                            <div class="progress-bar progress-bar-animated bg-warning progress-bar-striped"
                                role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
                                style="width: 75%;"></div>
                        </div>
                        <div class="mb-3 progress">
                            <div class="progress-bar progress-bar-animated bg-danger progress-bar-striped"
                                role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"
                                style="width: 100%;"></div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar"
                                aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"></div>
                            <div class="progress-bar progress-bar-animated bg-success progress-bar-striped"
                                role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"
                                style="width: 30%;"></div>
                            <div class="progress-bar progress-bar-animated bg-warning progress-bar-striped"
                                role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                                style="width: 20%;"></div>
                            <div class="progress-bar progress-bar-animated bg-danger progress-bar-striped"
                                role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                                style="width: 20%;"></div>
                        </div>
                        <div class="divider"></div>
                        <div class="mb-3 progress-bar-animated-alt progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0"
                                aria-valuemax="100" style="width: 10%;"></div>
                        </div>
                        <div class="mb-3 progress-bar-animated-alt progress">
                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                aria-valuemax="100" style="width: 25%;"></div>
                        </div>
                        <div class="mb-3 progress-bar-animated-alt progress">
                            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                                aria-valuemax="100" style="width: 50%;"></div>
                        </div>
                        <div class="mb-3 progress-bar-animated-alt progress">
                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0"
                                aria-valuemax="100" style="width: 75%;"></div>
                        </div>
                        <div class="mb-3 progress-bar-animated-alt progress">
                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                                aria-valuemax="100" style="width: 100%;"></div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-animated-alt" role="progressbar" aria-valuenow="10"
                                aria-valuemin="0" aria-valuemax="100" style="width: 10%;"></div>
                            <div class="progress-bar progress-bar-animated-alt bg-success" role="progressbar"
                                aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
                            <div class="progress-bar progress-bar-animated-alt bg-warning" role="progressbar"
                                aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div>
                            <div class="progress-bar progress-bar-animated-alt bg-danger" role="progressbar"
                                aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{> AppFooter/footer }}
</div>
{{/ base }}