<!DOCTYPE html>

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

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

                    <div class="container">
<div class="card">
<div class="card-header block">
<h4 class="card-title mb-1">Ladda</h4>
<p class="text-default-400">
                                    A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing.
                                </p>
</div>
<div class="card-body">
<div aria-labelledby="loading-btn-label" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 bg-warning/10 text-sm text-warning rounded-lg p-3 mb-4" id="loading-btn-alert" role="alert" tabindex="-1">
<div class="flex items-center">
<div id="loading-btn-label">
<strong>Note:</strong>
                                            This is a jQuery-based plugin, so you need to include jQuery for it to work.
                                        </div>
<div class="ps-3 ms-auto text-default-400">
<button data-hs-remove-element="#loading-btn-alert" type="button">
<span class="sr-only">Dismiss</span>
<i class="iconify tabler--x text-2xl"></i>
</button>
</div>
</div>
</div>
<div class="table-responsive-sm">
<table class="table">
<tbody>
<tr>
<td style="width: 50%">
<h5>Expand Left</h5>
</td>
<td>
<button class="ladda-button btn bg-primary hover:bg-primary-hover text-white" data-style="expand-left">Submit</button>
</td>
</tr>
<tr>
<td>
<h5>Expand Right</h5>
</td>
<td>
<button class="ladda-button btn bg-primary hover:bg-primary-hover text-white" data-style="expand-right">Submit</button>
</td>
</tr>
<tr>
<td>
<h5>Expand Up</h5>
</td>
<td>
<button class="ladda-button btn bg-primary hover:bg-primary-hover text-white" data-style="expand-up">Submit</button>
</td>
</tr>
<tr>
<td>
<h5>Expand Down</h5>
</td>
<td>
<button class="ladda-button btn bg-primary hover:bg-primary-hover text-white" data-style="expand-down">Submit</button>
</td>
</tr>
<tr>
<td>
<h5>Contract</h5>
</td>
<td>
<button class="ladda-button btn bg-warning hover:bg-warning-hover text-white" data-style="contract">Submit</button>
</td>
</tr>
<tr>
<td>
<h5>Zoom In</h5>
</td>
<td>
<button class="ladda-button btn bg-warning hover:bg-warning-hover text-white" data-style="zoom-in">Submit</button>
</td>
</tr>
<tr>
<td>
<h5>Zoom Out</h5>
</td>
<td>
<button class="ladda-button btn bg-warning hover:bg-warning-hover text-white" data-style="zoom-out">Submit</button>
</td>
</tr>
<tr>
<td>
<h5>Slide Left</h5>
</td>
<td>
<button class="ladda-button btn bg-info hover:bg-info-hover text-white" data-style="slide-left">Submit</button>
</td>
</tr>
<tr>
<td>
<h5>Slide Right</h5>
</td>
<td>
<button class="ladda-button btn bg-info hover:bg-info-hover text-white" data-style="slide-right">Submit</button>
</td>
</tr>
<tr>
<td>
<h5>Slide Up</h5>
</td>
<td>
<button class="ladda-button btn bg-info hover:bg-info-hover text-white" data-style="slide-up">Submit</button>
</td>
</tr>
<tr>
<td>
<h5>Slide Down</h5>
</td>
<td>
<button class="ladda-button btn bg-info hover:bg-info-hover text-white" data-style="slide-down">Submit</button>
</td>
</tr>
<tr>
<td>
<h5>Expand Right (Progress)</h5>
</td>
<td>
<button class="ladda-button btn bg-danger hover:bg-danger-hover text-white" data-style="expand-right">Submit</button>
</td>
</tr>
<tr>
<td>
<h5>Contract (Progress)</h5>
</td>
<td>
<button class="ladda-button btn bg-danger hover:bg-danger-hover text-white" data-style="contract">Submit</button>
</td>
</tr>
<tr>
<td>
<h5>Contract Overlay</h5>
</td>
<td>
<button class="ladda-button btn bg-danger hover:bg-danger-hover text-white" data-style="contract-overlay" style="z-index: 1000">Submit</button>
</td>
</tr>
<tr>
<td>
<h5>Zoom In (API demo)</h5>
</td>
<td>
<button class="ladda-button ladda-button-demo btn bg-primary hover:bg-primary-hover text-white" data-style="zoom-in">Submit</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end table-resp.-->
</div>
<!-- end card-body-->
</div>
<!-- end card-->
</div>
</main>

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

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

        <script src="/plugins/jquery/jquery.min.js"></script>
<!-- Ladda Plugin Js-->
<script src="/plugins/ladda/spin.min.js"></script>
<script src="/plugins/ladda/ladda.min.js"></script>
<script src="/plugins/ladda/ladda.jquery.min.js"></script>
<!-- Loading Buttons Page Js-->
<script src="/js/pages/plugins-loading-button.js"></script>
</body>
</html>