Ladda Bootstrap 3

Developer
Maksim Surguy
Size
3,476 Kb
Views
36,432
  1. Ladda Bootstrap 3 Previews
  2. Ladda Bootstrap 3 HTML Codes
  3. Ladda Bootstrap 3 JS Codes

How do I make an ladda bootstrap 3?

Ladda UI effect is a spinner inside of buttons. This particular one is for Bootstrap 3. What is a ladda bootstrap 3? How do you make a ladda bootstrap 3? This script and codes were developed by Maksim Surguy on 12 September 2022, Monday.

Ladda Bootstrap 3 Previews
IQ Test

Ladda Bootstrap 3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ladda Bootstrap 3</title> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <link rel='stylesheet prefetch' href='https://msurguy.github.io/ladda-bootstrap/dist/ladda-themeless.min.css'>
</head>
<body> <div class="container">
<div class="row text-center"> <h1>Ladda UI spinner effect For Bootstrap 3</h1> <p>Original idea by <a href="https://twitter.com/hakimel">@hakimel</a>, Bootstrap 3 adaptation by <a href="https://bootsnipp.com">Bootsnipp</a> creator, <a href="https://twitter.com/msurguy">@msurguy</a></p> <p> See the source and usage info <a href="https://github.com/msurguy/ladda-bootstrap">on Github</a></p>
</div>
<div class="row">	<div class="col-md-6 col-md-offset-3 text-center">	<p>	<button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>	<button class="btn btn-primary ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button>	<button class="btn btn-primary ladda-button" data-style="expand-up"><span class="ladda-label">expand-up</span></button>	<button class="btn btn-primary ladda-button" data-style="expand-down"><span class="ladda-label">expand-down</span></button>	</p>	</div>	</div>	<div class="row">	<div class="col-md-6 col-md-offset-3 text-center">	<p>	<button class="btn btn-info ladda-button" data-style="zoom-in"><span class="ladda-label">zoom-in</span></button>	<button class="btn btn-info ladda-button" data-style="zoom-out"><span class="ladda-label">zoom-out</span></button>	</p>	</div>	</div>	<div class="row">	<div class="col-md-6 col-md-offset-3 text-center">	<p>	<button class="btn btn-warning ladda-button" data-style="slide-left"><span class="ladda-label">slide-left</span></button>	<button class="btn btn-warning ladda-button" data-style="slide-right"><span class="ladda-label">slide-right</span></button>	<button class="btn btn-warning ladda-button" data-style="slide-up"><span class="ladda-label">slide-up</span></button>	<button class="btn btn-warning ladda-button" data-style="slide-down"><span class="ladda-label">slide-down</span></button>	</p>	<p><button class="btn btn-warning ladda-button" data-style="contract"><span class="ladda-label">contract</span></button></p>	</div>	</div>	<div class="row">	<div class="col-md-6 col-md-offset-3 text-center progress-demo">	<p>Built-in progress bar</p>	<p>	<button class="btn btn-danger ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button>	<button class="btn btn-danger ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>	<button class="btn btn-danger ladda-button" data-style="contract"><span class="ladda-label">contract</span></button>	</p>	</div>	</div>	<div class="row">	<div class="col-md-6 col-md-offset-3 text-center">	<p>Sizes</p>	<p>	<button class="btn btn-primary btn-xs ladda-button" data-style="expand-right" data-size="xs"><span class="ladda-label">extra small</span></button>	<button class="btn btn-primary btn-sm ladda-button" data-style="expand-right" data-size="s"><span class="ladda-label">small</span></button>	<button class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"><span class="ladda-label">large</span></button>	</p>	</div>	</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://msurguy.github.io/ladda-bootstrap/dist/spin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Ladda Bootstrap 3 - Script Codes JS Codes

/*! * Ladda 0.8.0 (2013-09-05, 18:54) * http://lab.hakim.se/ladda * MIT licensed * * Copyright (C) 2013 Hakim El Hattab, http://hakim.se */
(function(t,e){"object"==typeof exports?module.exports=e():"function"==typeof define&&define.amd?define(["spin"],e):t.Ladda=e(t.Spinner)})(this,function(t){"use strict";function e(t){if(t===void 0)return console.warn("Ladda button target must be defined."),void 0;t.querySelector(".ladda-label")||(t.innerHTML='<span class="ladda-label">'+t.innerHTML+"</span>");var e=i(t),n=document.createElement("span");n.className="ladda-spinner",t.appendChild(n);var r,a={start:function(){return t.setAttribute("disabled",""),t.setAttribute("data-loading",""),clearTimeout(r),e.spin(n),this.setProgress(0),this},startAfter:function(t){return clearTimeout(r),r=setTimeout(function(){a.start()},t),this},stop:function(){return t.removeAttribute("disabled"),t.removeAttribute("data-loading"),clearTimeout(r),r=setTimeout(function(){e.stop()},1e3),this},toggle:function(){return this.isLoading()?this.stop():this.start(),this},setProgress:function(e){e=Math.max(Math.min(e,1),0);var n=t.querySelector(".ladda-progress");0===e&&n&&n.parentNode?n.parentNode.removeChild(n):(n||(n=document.createElement("div"),n.className="ladda-progress",t.appendChild(n)),n.style.width=(e||0)*t.offsetWidth+"px")},enable:function(){return this.stop(),this},disable:function(){return this.stop(),t.setAttribute("disabled",""),this},isLoading:function(){return t.hasAttribute("data-loading")}};return o.push(a),a}function n(t,n){n=n||{};var r=[];"string"==typeof t?r=a(document.querySelectorAll(t)):"object"==typeof t&&"string"==typeof t.nodeName&&(r=[t]);for(var i=0,o=r.length;o>i;i++)(function(){var t=r[i];if("function"==typeof t.addEventListener){var a=e(t),o=-1;t.addEventListener("click",function(){a.startAfter(1),"number"==typeof n.timeout&&(clearTimeout(o),o=setTimeout(a.stop,n.timeout)),"function"==typeof n.callback&&n.callback.apply(null,[a])},!1)}})()}function r(){for(var t=0,e=o.length;e>t;t++)o[t].stop()}function i(e){var n,r=e.offsetHeight;r>32&&(r*=.8),e.hasAttribute("data-spinner-size")&&(r=parseInt(e.getAttribute("data-spinner-size"),10)),e.hasAttribute("data-spinner-color")&&(n=e.getAttribute("data-spinner-color"));var i=12,a=.2*r,o=.6*a,s=7>a?2:3;return new t({color:n||"#fff",lines:i,radius:a,length:o,width:s,zIndex:"auto",top:"auto",left:"auto",className:""})}function a(t){for(var e=[],n=0;t.length>n;n++)e.push(t[n]);return e}var o=[];return{bind:n,create:e,stopAll:r}});	// Bind normal buttons	Ladda.bind( 'div:not(.progress-demo) button', { timeout: 2000 } );	// Bind progress buttons and simulate loading progress	Ladda.bind( '.progress-demo button', {	callback: function( instance ) {	var progress = 0;	var interval = setInterval( function() {	progress = Math.min( progress + Math.random() * 0.1, 1 );	instance.setProgress( progress );	if( progress === 1 ) {	instance.stop();	clearInterval( interval );	}	}, 200 );	}	} );	// You can control loading explicitly using the JavaScript API	// as outlined below:	// var l = Ladda.create( document.querySelector( 'button' ) );	// l.start();	// l.stop();	// l.toggle();	// l.isLoading();	// l.setProgress( 0-1 );
Ladda Bootstrap 3 - Script Codes
Ladda Bootstrap 3 - Script Codes
Home Page Home
Developer Maksim Surguy
Username msurguy
Uploaded September 12, 2022
Rating 3.5
Size 3,476 Kb
Views 36,432
Do you need developer help for Ladda Bootstrap 3?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Maksim Surguy (msurguy) Script Codes
Name
Google maps new styling
Polygon background generator
Coolest clock ever
Background Blur plugin
Magnetic particles - iOS version
Interactive card
Bootstrap login flipper
Bootstrap - shop item
USA using webfont stately
Sortable Grid UI JS
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!