@extends('layout.mainlayout')

@section('content-wrapper')
    <!-- Main Content Header -->
    <div class="main-content-header">
        <h1>Progress bars</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/">Dashboard</a>
            </li>
            <li class="breadcrumb-item active">
                <span class="active">Progress bars</span>
            </li>
        </ol>
    </div>
    <!-- End Main Content Header -->

    <!-- Progress Bar -->
    <div class="row">
        <div class="col-xl-6">
            <div class="card mb-30">
                <div class="card-body">
                    <div class="card-header">
                        <h5 class="card-title">Default Progress Bar</h5>
                    </div>

                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-primary" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-secondary" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-warning" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-danger" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-info" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-dark" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-6">
            <div class="card mb-30">
                <div class="card-body">
                    <div class="card-header">
                        <h5 class="card-title">Progress Bar With Label</h5>
                    </div>

                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-primary" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-secondary" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%;">55%</div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-warning" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;">65%</div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-danger" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">70%</div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-info" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">75%</div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-dark" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">80%</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-6">
            <div class="card mb-30">
                <div class="card-body">
                    <div class="card-header">
                        <h5 class="card-title">Striped Progress Bar</h5>
                    </div>

                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-primary progress-bar-striped" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-secondary progress-bar-striped" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-success progress-bar-striped" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-warning progress-bar-striped" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-danger progress-bar-striped" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-info progress-bar-striped" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-dark progress-bar-striped" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-6">
            <div class="card mb-30">
                <div class="card-body">
                    <div class="card-header">
                        <h5 class="card-title">Animated Progress Bar</h5>
                    </div>

                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-primary progress-bar-animated progress-bar-striped" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-secondary progress-bar-animated progress-bar-striped" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-success progress-bar-animated progress-bar-striped" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-warning progress-bar-animated progress-bar-striped" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-danger progress-bar-animated progress-bar-striped" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-info progress-bar-animated progress-bar-striped" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-dark progress-bar-animated progress-bar-striped" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-12">
            <div class="card mb-30">
                <div class="card-body">
                    <div class="card-header">
                        <h5 class="card-title">Stacked Progress Bar</h5>
                    </div>

                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-primary progress-bar-striped" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                        <div role="progressbar" class="progress-bar bg-secondary" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%;"></div>
                        <div role="progressbar" class="progress-bar bg-success progress-bar-striped" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-success progress-bar-striped" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
                        <div role="progressbar" class="progress-bar bg-warning" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div>
                        <div role="progressbar" class="progress-bar bg-danger progress-bar-striped" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-secondary progress-bar-striped" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%;"></div>
                        <div role="progressbar" class="progress-bar bg-success" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                        <div role="progressbar" class="progress-bar bg-warning progress-bar-striped" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-success progress-bar-striped" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
                        <div role="progressbar" class="progress-bar bg-warning" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
                        <div role="progressbar" class="progress-bar bg-danger progress-bar-striped" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div>
                    </div>
                    <div class="mt-3 radius-0 progress">
                        <div role="progressbar" class="progress-bar bg-warning progress-bar-striped" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
                        <div role="progressbar" class="progress-bar bg-danger" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%;"></div>
                        <div role="progressbar" class="progress-bar bg-info progress-bar-striped" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Progress Bar -->
@endsection