sleek-dashboard/src/button-loading.html

Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com

---
layout: default
title: "Button-loading - Sleek Admin Dashboard Template"


parent: "components"
sub_parent: "components"
activePage: "button-loading"
plugins: ["ladda"]
---
						<div class="breadcrumb-wrapper">
							<h1>Button Loading</h1>
							{% include breadcrumb.htm %}
						</div>

						<div class="row">
							<div class="col-12">
								<div class="card card-default">
									<div class="card-body py-4">
										<p> Ladda 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. <a href="https://lab.hakim.se/ladda/" target="_blank">more details</a>.</p>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-3">
								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Expand-Left</h2>
									</div>
									<div class="card-body">
										<button class="ladda-button btn btn-primary btn-square btn-ladda" data-style="expand-left">
											<span class="ladda-label">Submit!</span>
											<span class="ladda-spinner"></span>
										</button>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-3">
								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Expand-Right</h2>
									</div>
									<div class="card-body">
										<button class="ladda-button btn btn-primary btn-square btn-ladda" data-style="expand-right">
											<span class="ladda-label">Submit!</span>
											<span class="ladda-spinner"></span>
										</button>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-3">
								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Expand-Up</h2>
									</div>
									<div class="card-body">
										<button class="ladda-button btn btn-primary btn-square btn-ladda" data-style="expand-up">
											<span class="ladda-label">Submit!</span>
											<span class="ladda-spinner"></span>
										</button>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-3">
								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Expand-Down</h2>
									</div>
									<div class="card-body">
										<button class="ladda-button btn btn-primary btn-square btn-ladda" data-style="expand-down">
											<span class="ladda-label">Submit!</span>
											<span class="ladda-spinner"></span>
										</button>
									</div>
								</div>
							</div>

							<div class="col-md-6 col-lg-3">
								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Contract</h2>
									</div>
									<div class="card-body">
										<button class="ladda-button btn btn-success btn-square btn-ladda" data-style="contract">
											<span class="ladda-label">Submit!</span>
											<span class="ladda-spinner"></span>
										</button>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-3">
								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Contract Overlay</h2>
									</div>
									<div class="card-body">
										<button class="ladda-button btn btn-success btn-square btn-ladda" data-style="contract-overlay">
											<span class="ladda-label">Submit!</span>
											<span class="ladda-spinner"></span>
										</button>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-3">
								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Zoom In</h2>
									</div>
									<div class="card-body">
										<button class="ladda-button btn btn-success btn-square btn-ladda" data-style="zoom-in">
											<span class="ladda-label">Submit!</span>
											<span class="ladda-spinner"></span>
										</button>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-3">
								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Zoom Out</h2>
									</div>
									<div class="card-body">
										<button class="ladda-button btn btn-success btn-square btn-ladda" data-style="zoom-out">
											<span class="ladda-label">Submit!</span>
											<span class="ladda-spinner"></span>
										</button>
									</div>
								</div>
							</div>

							<div class="col-md-6 col-lg-3">
								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Slide Left</h2>
									</div>
									<div class="card-body">
										<button class="ladda-button btn btn-danger btn-square btn-ladda" data-style="slide-left">
											<span class="ladda-label">Submit!</span>
											<span class="ladda-spinner"></span>
										</button>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-3">
								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Slide Right</h2>
									</div>
									<div class="card-body">
										<button class="ladda-button btn btn-danger btn-square btn-ladda" data-style="slide-right">
											<span class="ladda-label">Submit!</span>
											<span class="ladda-spinner"></span>
										</button>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-3">
								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Slide Up</h2>
									</div>
									<div class="card-body">
										<button class="ladda-button btn btn-danger btn-square btn-ladda" data-style="slide-up">
											<span class="ladda-label">Submit!</span>
											<span class="ladda-spinner"></span>
										</button>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-3">
								<div class="card card-default">
									<div class="card-header card-header-border-bottom">
										<h2>Slide Down</h2>
									</div>
									<div class="card-body">
										<button class="ladda-button btn btn-danger btn-square btn-ladda" data-style="slide-down">
											<span class="ladda-label">Submit!</span>
											<span class="ladda-spinner"></span>
										</button>
									</div>
								</div>
							</div>

						</div>