<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Progress')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Base UI', 'title' => 'Progress')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Base UI', 'title' => 'Progress')) ?>

                    <div class="container">
<div class="grid grid-cols-1 xl:grid-cols-2 gap-base">
<div class="flex gap-base flex-col">
<div class="card">
<div class="card-header">
<h4 class="card-title">Examples</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">A progress bar can be used to show a user how far along he/she is in a process.</p>
<div class="flex flex-col gap-2.5">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" class="bg-default-100 flex h-4 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-primary flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 0%"></div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="bg-default-100 flex h-4 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-primary flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 25%"></div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="bg-default-100 flex h-4 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-primary flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="bg-default-100 flex h-4 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-primary flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 75%"></div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="bg-default-100 flex h-4 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-primary flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Height</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">Different height classes are used to create progress bars of various sizes. Adjust the height or width values to customize their appearance.</p>
<div class="flex flex-col gap-2.5">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="bg-default-100 flex h-px w-full overflow-hidden rounded" role="progressbar">
<div class="bg-danger flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 25%"></div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="bg-default-100 flex h-0.75 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-primary flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 25%"></div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="bg-default-100 flex h-1.25 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-success flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 25%"></div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="bg-default-100 flex h-2 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-info flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="bg-default-100 flex h-3 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-warning flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 75%"></div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="38" class="bg-default-100 flex h-3.75 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-success flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 38%"></div>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Multiple Bars</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">Include multiple progress bars in a progress component if you need.</p>
<!-- Multiple bars Progress -->
<div class="bg-default-100 flex h-4 w-full overflow-hidden rounded">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="15" class="bg-primary flex flex-col justify-center overflow-hidden whitespace-nowrap" role="progressbar" style="width: 15%"></div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" class="bg-success flex flex-col justify-center overflow-hidden whitespace-nowrap" role="progressbar" style="width: 30%"></div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" class="bg-info flex flex-col justify-center overflow-hidden whitespace-nowrap" role="progressbar" style="width: 20%"></div>
</div>
<!-- End Multiple bars Progress -->
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Animated Stripes</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                            The striped gradient can also be animated. Add
                                            <code>.progress-bar-animated</code>
                                            to
                                            <code>.progress-bar</code>
                                            to animate the stripes right to left via CSS3 animations.
                                        </p>
<div class="bg-default-100 h-4 w-full overflow-hidden rounded">
<div aria-valuemax="75" aria-valuemin="0" aria-valuenow="25" class="bg-primary progress-striped h-4 animate-progress-stripes" role="progressbar" style="width: 75%"></div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
</div>
<div class="flex gap-base flex-col">
<div class="card">
<div class="card-header">
<h4 class="card-title">Labels</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                            Add labels to your progress bars by placing text within the
                                            <code>.progress-bar</code>
                                            .
                                        </p>
<div class="flex gap-base flex-col">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="bg-default-100 flex h-4 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-primary flex flex-col justify-center overflow-hidden text-center text-2xs whitespace-nowrap text-white" style="width: 25%">25%</div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" class="bg-default-100 flex h-4 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-primary relative flex h-4 w-[10%] items-center overflow-visible text-2xs font-medium whitespace-nowrap" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Backgrounds</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">Use background utility classes to change the appearance of individual progress bars.</p>
<div class="flex flex-col gap-2.5">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="bg-default-100 flex h-4 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-primary flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 25%"></div>
</div>
<div aria-valuemax="50" aria-valuemin="0" aria-valuenow="50" class="bg-default-100 flex h-4 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-info flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="bg-default-100 flex h-4 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-warning flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 75%"></div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="bg-default-100 flex h-4 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-danger flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="65" class="bg-default-100 flex h-4 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-dark flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 65%"></div>
</div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="bg-default-100 flex h-4 w-full overflow-hidden rounded" role="progressbar">
<div class="bg-secondary flex flex-col justify-center overflow-hidden text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Striped</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">
                                            Add
                                            <code>.progress-bar-striped</code>
                                            to any
                                            <code>.progress-bar</code>
                                            to apply a stripe via CSS gradient over the progress bar’s background color.
                                        </p>
<div class="flex flex-col gap-2.5">
<div class="bg-default-100 h-4 w-full overflow-hidden rounded">
<div aria-valuemax="10" aria-valuemin="0" class="bg-primary progress h-4" role="progressbar" style="width: 10%"></div>
</div>
<div class="bg-default-100 h-4 w-full overflow-hidden rounded">
<div aria-valuemax="25" aria-valuemin="0" class="bg-success progress h-4" role="progressbar" style="width: 25%"></div>
</div>
<div class="bg-default-100 h-4 w-full overflow-hidden rounded">
<div aria-valuemax="50" aria-valuemin="0" class="bg-info progress h-4" role="progressbar" style="width: 50%"></div>
</div>
<div class="bg-default-100 h-4 w-full overflow-hidden rounded">
<div aria-valuemax="75" aria-valuemin="0" class="bg-warning progress h-4" role="progressbar" style="width: 75%"></div>
</div>
<div class="bg-default-100 h-4 w-full overflow-hidden rounded">
<div aria-valuemax="100" aria-valuemin="0" class="bg-danger progress h-4" role="progressbar" style="width: 100%"></div>
</div>
</div>
<!-- End Multiple bars Progress -->
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Steps</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<!-- Stepper -->
<ul class="flex w-full items-center justify-between">
<!-- Step 1 -->
<li class="flex w-full items-center">
<span class="bg-primary flex size-9 shrink-0 items-center justify-center rounded-full font-medium text-white">1</span>
<div class="bg-primary h-0.5 flex-1"></div>
</li>
<!-- Step 2 -->
<li class="flex w-full items-center">
<span class="bg-primary flex size-9 shrink-0 items-center justify-center rounded-full font-medium text-white">2</span>
<div class="bg-default-100 h-0.5 flex-1"></div>
</li>
<!-- Step 3 -->
<li class="flex items-center">
<span class="bg-default-100 text-default-800 flex size-9 shrink-0 items-center justify-center rounded-full font-medium">3</span>
</li>
</ul>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>
    </body>
</html>