├── .gitignore ├── package.json ├── dist ├── ladda.jquery.min.js ├── ladda.min.js ├── spin.min.js ├── ladda.js ├── ladda-themeless.min.css ├── ladda.min.css ├── spin.js ├── ladda-themeless.css └── ladda.css ├── js ├── ladda.jquery.js ├── prism.js ├── ladda.js └── spin.js ├── LICENSE ├── css ├── ladda-theme.scss ├── prism.css └── ladda.scss ├── README.md └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Build system 2 | .sass-cache/ 3 | 4 | # Nodejs 5 | node_modules/ 6 | 7 | # Editors 8 | .idea/ 9 | .vscode/ 10 | 11 | # MacOS 12 | .DS_Store 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ladda-bootstrap", 3 | "version": "0.1.0", 4 | "description": "Buttons with built-in loading indicators, effectively bridging the gap between action and feedback.", 5 | "repository": { 6 | "type": "git", 7 | "url": "git@github.com:msurguy/ladda-bootstrap.git" 8 | }, 9 | "author": "", 10 | "license": "ISC" 11 | } 12 | -------------------------------------------------------------------------------- /dist/ladda.jquery.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Ladda for jQuery 3 | * http://lab.hakim.se/ladda 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2014 Hakim El Hattab, http://hakim.se 7 | */ 8 | (function(t,e){if(void 0===e)return console.error("jQuery required for Ladda.jQuery");var i=[];e=e.extend(e,{ladda:function(e){"stopAll"===e&&t.stopAll()}}),e.fn=e.extend(e.fn,{ladda:function(n){var r=i.slice.call(arguments,1);return"bind"===n?(r.unshift(e(this).selector),t.bind.apply(t,r)):e(this).each(function(){var i,o=e(this);void 0===n?o.data("ladda",t.create(this)):(i=o.data("ladda"),i[n].apply(i,r))}),this}})})(this.Ladda,this.jQuery); -------------------------------------------------------------------------------- /js/ladda.jquery.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Ladda for jQuery 3 | * http://lab.hakim.se/ladda 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2014 Hakim El Hattab, http://hakim.se 7 | */ 8 | 9 | (function( Ladda, $ ) { 10 | if ($ === undefined) 11 | return console.error( 'jQuery required for Ladda.jQuery' ); 12 | 13 | var arr = []; 14 | 15 | $ = $.extend( $, { 16 | ladda: function( arg ) { 17 | if( arg === 'stopAll' ) 18 | Ladda.stopAll(); 19 | } 20 | }); 21 | 22 | $.fn = $.extend( $.fn, { 23 | ladda: function( arg ) { 24 | var args = arr.slice.call( arguments, 1 ); 25 | 26 | if( arg === 'bind' ) { 27 | args.unshift( $( this ).selector ); 28 | Ladda.bind.apply( Ladda, args ); 29 | } 30 | else { 31 | $( this ).each( function() { 32 | var $this = $( this ), ladda; 33 | 34 | if( arg === undefined ) 35 | $this.data( 'ladda', Ladda.create( this ) ); 36 | else { 37 | ladda = $this.data( 'ladda' ); 38 | ladda[arg].apply( ladda, args ); 39 | } 40 | }); 41 | } 42 | 43 | return this; 44 | } 45 | }); 46 | }( this.Ladda, this.jQuery )); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (C) 2014 Hakim El Hattab and Maksim Surguy 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /css/ladda-theme.scss: -------------------------------------------------------------------------------- 1 | /** Contains the default Ladda button theme styles */ 2 | 3 | 4 | /************************************* 5 | * CONFIG 6 | */ 7 | 8 | $green: #2aca76; 9 | $blue: #53b5e6; 10 | $red: #ea8557; 11 | $purple: #9973C2; 12 | $mint: #16a085; 13 | 14 | 15 | /************************************* 16 | * BUTTON THEME 17 | */ 18 | 19 | .ladda-button { 20 | background: #666; 21 | border: 0; 22 | padding: 14px 18px; 23 | font-size: 18px; 24 | cursor: pointer; 25 | 26 | color: #fff; 27 | border-radius: 2px; 28 | border: 1px solid transparent; 29 | 30 | -webkit-appearance: none; 31 | -webkit-font-smoothing: antialiased; 32 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 33 | 34 | &:hover { 35 | border-color: rgba( 0, 0, 0, 0.07 ); 36 | background-color: #888; 37 | } 38 | 39 | @include buttonColor( 'green', $green ); 40 | @include buttonColor( 'blue', $blue ); 41 | @include buttonColor( 'red', $red ); 42 | @include buttonColor( 'purple', $purple ); 43 | @include buttonColor( 'mint', $mint ); 44 | 45 | &[disabled], 46 | &[data-loading] { 47 | border-color: rgba( 0, 0, 0, 0.07 ); 48 | 49 | &, &:hover { 50 | cursor: default; 51 | background-color: #999; 52 | } 53 | } 54 | 55 | &[data-size=xs] { 56 | padding: 4px 8px; 57 | 58 | .ladda-label { 59 | font-size: 0.7em; 60 | } 61 | } 62 | 63 | &[data-size=s] { 64 | padding: 6px 10px; 65 | 66 | .ladda-label { 67 | font-size: 0.9em; 68 | } 69 | } 70 | 71 | &[data-size=l] .ladda-label { 72 | font-size: 1.2em; 73 | } 74 | 75 | &[data-size=xl] .ladda-label { 76 | font-size: 1.5em; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /css/prism.css: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js default theme for JavaScript, CSS and HTML 3 | * Based on dabblet (http://dabblet.com) 4 | * @author Lea Verou 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: black; 10 | text-shadow: 0 1px white; 11 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 12 | direction: ltr; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | 17 | -moz-tab-size: 4; 18 | -o-tab-size: 4; 19 | tab-size: 4; 20 | 21 | -webkit-hyphens: none; 22 | -moz-hyphens: none; 23 | -ms-hyphens: none; 24 | hyphens: none; 25 | } 26 | 27 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 28 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 29 | text-shadow: none; 30 | background: #b3d4fc; 31 | } 32 | 33 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 34 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 35 | text-shadow: none; 36 | background: #b3d4fc; 37 | } 38 | 39 | @media print { 40 | code[class*="language-"], 41 | pre[class*="language-"] { 42 | text-shadow: none; 43 | } 44 | } 45 | 46 | /* Code blocks */ 47 | pre[class*="language-"] { 48 | padding: 1em; 49 | margin: .5em 0; 50 | overflow: auto; 51 | } 52 | 53 | :not(pre) > code[class*="language-"], 54 | pre[class*="language-"] { 55 | background: #f5f2f0; 56 | } 57 | 58 | /* Inline code */ 59 | :not(pre) > code[class*="language-"] { 60 | padding: .1em; 61 | border-radius: .3em; 62 | } 63 | 64 | .token.comment, 65 | .token.prolog, 66 | .token.doctype, 67 | .token.cdata { 68 | color: slategray; 69 | } 70 | 71 | .token.punctuation { 72 | color: #999; 73 | } 74 | 75 | .namespace { 76 | opacity: .7; 77 | } 78 | 79 | .token.property, 80 | .token.tag, 81 | .token.boolean, 82 | .token.number { 83 | color: #905; 84 | } 85 | 86 | .token.selector, 87 | .token.attr-name, 88 | .token.string { 89 | color: #690; 90 | } 91 | 92 | .token.operator, 93 | .token.entity, 94 | .token.url, 95 | .language-css .token.string, 96 | .style .token.string { 97 | color: #a67f59; 98 | background: hsla(0,0%,100%,.5); 99 | } 100 | 101 | .token.atrule, 102 | .token.attr-value, 103 | .token.keyword { 104 | color: #07a; 105 | } 106 | 107 | 108 | .token.regex, 109 | .token.important { 110 | color: #e90; 111 | } 112 | 113 | .token.important { 114 | font-weight: bold; 115 | } 116 | 117 | .token.entity { 118 | cursor: help; 119 | } 120 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Project INACTIVE 2 | 3 | There is now no need to maintain this project as Ladda operates well on its own with Bootstrap and demo pages could be found in the original Ladda repository: https://github.com/hakimel/Ladda/tree/master/test 4 | 5 | # Ladda for Bootstrap 3 6 | 7 | Buttons with built-in loading indicators, effectively bridging the gap between action and feedback. 8 | 9 | [Check out the demo page](http://msurguy.github.io/ladda-bootstrap/). 10 | 11 | ## Instructions 12 | 13 | Please see the demo page for the details: (http://msurguy.github.io/ladda-bootstrap/). 14 | 15 | #### HTML 16 | 17 | Ladda buttons must be given the class ```ladda-button``` and the button label needs to have the ```ladda-label``` class. The ```ladda-label``` will be automatically created if it does not exist in the DOM. Below is an example of a button which will use the expand-right animation style. 18 | 19 | ```html 20 | 21 | ``` 22 | 23 | Buttons accepts three attributes: 24 | - **data-style**: one of the button styles, full list in [demo](http://lab.hakim.se/ladda/) *[required]* 25 | - **data-color**: green/red/blue/purple/mint 26 | - **data-size**: xs/s/l/xl, defaults to medium 27 | - **data-spinner-size**: 40, pixel dimensions of spinner, defaults to dynamic size based on the button height 28 | - **data-spinner-color**: A hex code or any [named CSS color](http://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/). 29 | 30 | #### JavaScript 31 | 32 | If you will be using the loading animation for a form that is submitted to the server (always resulting in a page reload) you can use the ```bind()``` method: 33 | 34 | ```javascript 35 | // Automatically trigger the loading animation on click 36 | Ladda.bind( 'input[type=submit]' ); 37 | 38 | // Same as the above but automatically stops after two seconds 39 | Ladda.bind( 'input[type=submit]', { timeout: 2000 } ); 40 | ``` 41 | 42 | If you want JavaScript control over your buttons you can use the following approach: 43 | 44 | ```javascript 45 | // Create a new instance of ladda for the specified button 46 | // Please note that this must be done after the button has been 47 | // added to the DOM. 48 | var l = Ladda.create( document.querySelector( '.my-button' ) ); 49 | 50 | // Start loading 51 | l.start(); 52 | 53 | // Will display a progress bar for 50% of the button width 54 | l.setProgress( 0.5 ); 55 | 56 | // Stop loading 57 | l.stop(); 58 | 59 | // Toggle between loading/not loading states 60 | l.toggle(); 61 | 62 | // Check the current state 63 | l.isLoading(); 64 | ``` 65 | 66 | All loading animations on the page can be stopped by using: 67 | 68 | ```javascript 69 | Ladda.stopAll(); 70 | ``` 71 | 72 | ## Browser support 73 | 74 | The project is tested in Chrome and Firefox. It Should Work™ in the current stable releases of Chrome, Firefox, Safari as well as IE9 and up. 75 | 76 | ## License 77 | 78 | MIT licensed 79 | 80 | Copyright (C) 2013 Hakim El Hattab, http://hakim.se 81 | -------------------------------------------------------------------------------- /dist/ladda.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Ladda 0.9.4 (2014-06-21, 11:24) 3 | * http://lab.hakim.se/ladda 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2014 Hakim El Hattab, http://hakim.se 7 | */ 8 | (function(t,e){"object"==typeof exports?module.exports=e(require("spin.js")):"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=''+t.innerHTML+"");var e,n=document.createElement("span");n.className="ladda-spinner",t.appendChild(n);var r,a={start:function(){return e||(e=o(t)),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),e&&(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")},remove:function(){clearTimeout(r),t.removeAttribute("disabled",""),t.removeAttribute("data-loading",""),e&&(e.stop(),e=null);for(var n=0,i=u.length;i>n;n++)if(a===u[n]){u.splice(n,1);break}}};return u.push(a),a}function n(t,e){for(;t.parentNode&&t.tagName!==e;)t=t.parentNode;return e===t.tagName?t:void 0}function r(t){for(var e=["input","textarea"],n=[],r=0;e.length>r;r++)for(var a=t.getElementsByTagName(e[r]),i=0;a.length>i;i++)a[i].hasAttribute("required")&&n.push(a[i]);return n}function a(t,a){a=a||{};var i=[];"string"==typeof t?i=s(document.querySelectorAll(t)):"object"==typeof t&&"string"==typeof t.nodeName&&(i=[t]);for(var o=0,u=i.length;u>o;o++)(function(){var t=i[o];if("function"==typeof t.addEventListener){var s=e(t),u=-1;t.addEventListener("click",function(){var e=!0,i=n(t,"FORM");if(i!==void 0)for(var o=r(i),d=0;o.length>d;d++)""===o[d].value.replace(/^\s+|\s+$/g,"")&&(e=!1);e&&(s.startAfter(1),"number"==typeof a.timeout&&(clearTimeout(u),u=setTimeout(s.stop,a.timeout)),"function"==typeof a.callback&&a.callback.apply(null,[s]))},!1)}})()}function i(){for(var t=0,e=u.length;e>t;t++)u[t].stop()}function o(e){var n,r=e.offsetHeight;0===r&&(r=parseFloat(window.getComputedStyle(e).height)),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 a=12,i=.2*r,o=.6*i,s=7>i?2:3;return new t({color:n||"#fff",lines:a,radius:i,length:o,width:s,zIndex:"auto",top:"auto",left:"auto",className:""})}function s(t){for(var e=[],n=0;t.length>n;n++)e.push(t[n]);return e}var u=[];return{bind:a,create:e,stopAll:i}}); -------------------------------------------------------------------------------- /dist/spin.min.js: -------------------------------------------------------------------------------- 1 | (function(t,e){"object"==typeof exports?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Spinner=e()})(this,function(){"use strict";function t(t,e){var i,n=document.createElement(t||"div");for(i in e)n[i]=e[i];return n}function e(t){for(var e=1,i=arguments.length;i>e;e++)t.appendChild(arguments[e]);return t}function i(t,e,i,n){var r=["opacity",e,~~(100*t),i,n].join("-"),o=.01+100*(i/n),a=Math.max(1-(1-t)/e*(100-o),t),s=u.substring(0,u.indexOf("Animation")).toLowerCase(),l=s&&"-"+s+"-"||"";return c[r]||(p.insertRule("@"+l+"keyframes "+r+"{"+"0%{opacity:"+a+"}"+o+"%{opacity:"+t+"}"+(o+.01)+"%{opacity:1}"+(o+e)%100+"%{opacity:"+t+"}"+"100%{opacity:"+a+"}"+"}",p.cssRules.length),c[r]=1),r}function n(t,e){var i,n,r=t.style;for(e=e.charAt(0).toUpperCase()+e.slice(1),n=0;d.length>n;n++)if(i=d[n]+e,void 0!==r[i])return i;return void 0!==r[e]?e:void 0}function r(t,e){for(var i in e)t.style[n(t,i)||i]=e[i];return t}function o(t){for(var e=1;arguments.length>e;e++){var i=arguments[e];for(var n in i)void 0===t[n]&&(t[n]=i[n])}return t}function a(t,e){return"string"==typeof t?t:t[e%t.length]}function s(t){this.opts=o(t||{},s.defaults,f)}function l(){function i(e,i){return t("<"+e+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',i)}p.addRule(".spin-vml","behavior:url(#default#VML)"),s.prototype.lines=function(t,n){function o(){return r(i("group",{coordsize:d+" "+d,coordorigin:-u+" "+-u}),{width:d,height:d})}function s(t,s,l){e(p,e(r(o(),{rotation:360/n.lines*t+"deg",left:~~s}),e(r(i("roundrect",{arcsize:n.corners}),{width:u,height:n.width,left:n.radius,top:-n.width>>1,filter:l}),i("fill",{color:a(n.color,t),opacity:n.opacity}),i("stroke",{opacity:0}))))}var l,u=n.length+n.width,d=2*u,c=2*-(n.width+n.length)+"px",p=r(o(),{position:"absolute",top:c,left:c});if(n.shadow)for(l=1;n.lines>=l;l++)s(l,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(l=1;n.lines>=l;l++)s(l);return e(t,p)},s.prototype.opacity=function(t,e,i,n){var r=t.firstChild;n=n.shadow&&n.lines||0,r&&r.childNodes.length>e+n&&(r=r.childNodes[e+n],r=r&&r.firstChild,r=r&&r.firstChild,r&&(r.opacity=i))}}var u,d=["webkit","Moz","ms","O"],c={},p=function(){var i=t("style",{type:"text/css"});return e(document.getElementsByTagName("head")[0],i),i.sheet||i.styleSheet}(),f={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",direction:1,speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"50%",left:"50%",position:"absolute"};s.defaults={},o(s.prototype,{spin:function(e){this.stop();var i=this,n=i.opts,o=i.el=r(t(0,{className:n.className}),{position:n.position,width:0,zIndex:n.zIndex});if(n.radius+n.length+n.width,r(o,{left:n.left,top:n.top}),e&&e.insertBefore(o,e.firstChild||null),o.setAttribute("role","progressbar"),i.lines(o,i.opts),!u){var a,s=0,l=(n.lines-1)*(1-n.direction)/2,d=n.fps,c=d/n.speed,p=(1-n.opacity)/(c*n.trail/100),f=c/n.lines;(function h(){s++;for(var t=0;n.lines>t;t++)a=Math.max(1-(s+(n.lines-t)*f)%c*p,n.opacity),i.opacity(o,t*n.direction+l,a,n);i.timeout=i.el&&setTimeout(h,~~(1e3/d))})()}return i},stop:function(){var t=this.el;return t&&(clearTimeout(this.timeout),t.parentNode&&t.parentNode.removeChild(t),this.el=void 0),this},lines:function(n,o){function s(e,i){return r(t(),{position:"absolute",width:o.length+o.width+"px",height:o.width+"px",background:e,boxShadow:i,transformOrigin:"left",transform:"rotate("+~~(360/o.lines*d+o.rotate)+"deg) translate("+o.radius+"px"+",0)",borderRadius:(o.corners*o.width>>1)+"px"})}for(var l,d=0,c=(o.lines-1)*(1-o.direction)/2;o.lines>d;d++)l=r(t(),{position:"absolute",top:1+~(o.width/2)+"px",transform:o.hwaccel?"translate3d(0,0,0)":"",opacity:o.opacity,animation:u&&i(o.opacity,o.trail,c+d*o.direction,o.lines)+" "+1/o.speed+"s linear infinite"}),o.shadow&&e(l,r(s("#000","0 0 4px #000"),{top:"2px"})),e(n,e(l,s(a(o.color,d),"0 0 1px rgba(0,0,0,.1)")));return n},opacity:function(t,e,i){t.childNodes.length>e&&(t.childNodes[e].style.opacity=i)}});var h=r(t("group"),{behavior:"url(#default#VML)"});return!n(h,"transform")&&h.adj?l():u=n(h,"animation"),s}); -------------------------------------------------------------------------------- /js/prism.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Prism: Lightweight, robust, elegant syntax highlighting 3 | * MIT license http://www.opensource.org/licenses/mit-license.php/ 4 | * @author Lea Verou http://lea.verou.me 5 | */(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&").replace(/e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+""};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();; 6 | Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});; 7 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/ig,inside:{tag:{pattern:/(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});; 8 | Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}}, number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|(&){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g}; 9 | ; 10 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|throw|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/ig,inside:{tag:{pattern:/(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}}); 11 | ; 12 | -------------------------------------------------------------------------------- /dist/ladda.js: -------------------------------------------------------------------------------- 1 | (function(root, factory) { 2 | if (typeof exports === "object") { 3 | module.exports = factory(); 4 | } else if (typeof define === "function" && define.amd) { 5 | define([ "./spin" ], factory); 6 | } else { 7 | root.Ladda = factory(root.Spinner); 8 | } 9 | })(this, function(Spinner) { 10 | "use strict"; 11 | var ALL_INSTANCES = []; 12 | function create(button) { 13 | if (typeof button === "undefined") { 14 | console.warn("Ladda button target must be defined."); 15 | return; 16 | } 17 | if (!button.querySelector(".ladda-label")) { 18 | button.innerHTML = '' + button.innerHTML + ""; 19 | } 20 | var spinner = createSpinner(button); 21 | var spinnerWrapper = document.createElement("span"); 22 | spinnerWrapper.className = "ladda-spinner"; 23 | button.appendChild(spinnerWrapper); 24 | var timer; 25 | var instance = { 26 | start: function() { 27 | button.setAttribute("disabled", ""); 28 | button.setAttribute("data-loading", ""); 29 | clearTimeout(timer); 30 | spinner.spin(spinnerWrapper); 31 | this.setProgress(0); 32 | return this; 33 | }, 34 | startAfter: function(delay) { 35 | clearTimeout(timer); 36 | timer = setTimeout(function() { 37 | instance.start(); 38 | }, delay); 39 | return this; 40 | }, 41 | stop: function() { 42 | button.removeAttribute("disabled"); 43 | button.removeAttribute("data-loading"); 44 | clearTimeout(timer); 45 | timer = setTimeout(function() { 46 | spinner.stop(); 47 | }, 1e3); 48 | return this; 49 | }, 50 | remove: function() { 51 | if (this.isLoading()) { 52 | this.stop(); 53 | } 54 | spinnerWrapper.parentNode.removeChild(spinnerWrapper); 55 | return this; 56 | }, 57 | toggle: function() { 58 | if (this.isLoading()) { 59 | this.stop(); 60 | } else { 61 | this.start(); 62 | } 63 | return this; 64 | }, 65 | setProgress: function(progress) { 66 | progress = Math.max(Math.min(progress, 1), 0); 67 | var progressElement = button.querySelector(".ladda-progress"); 68 | if (progress === 0 && progressElement && progressElement.parentNode) { 69 | progressElement.parentNode.removeChild(progressElement); 70 | } else { 71 | if (!progressElement) { 72 | progressElement = document.createElement("div"); 73 | progressElement.className = "ladda-progress"; 74 | button.appendChild(progressElement); 75 | } 76 | progressElement.style.width = (progress || 0) * button.offsetWidth + "px"; 77 | } 78 | }, 79 | enable: function() { 80 | this.stop(); 81 | return this; 82 | }, 83 | disable: function() { 84 | this.stop(); 85 | button.setAttribute("disabled", ""); 86 | return this; 87 | }, 88 | isLoading: function() { 89 | return button.hasAttribute("data-loading"); 90 | }, 91 | getTarget: function() { 92 | return button; 93 | } 94 | }; 95 | ALL_INSTANCES.push(instance); 96 | return instance; 97 | } 98 | function bind(target, options) { 99 | options = options || {}; 100 | var targets = []; 101 | if (typeof target === "string") { 102 | targets = toArray(document.querySelectorAll(target)); 103 | } else if (typeof target === "object" && typeof target.nodeName === "string") { 104 | targets = [ target ]; 105 | } 106 | for (var i = 0, len = targets.length; i < len; i++) { 107 | (function() { 108 | var element = targets[i]; 109 | if (typeof element.addEventListener === "function") { 110 | var instance = create(element); 111 | var timeout = -1; 112 | element.addEventListener("click", function() { 113 | instance.startAfter(1); 114 | if (typeof options.timeout === "number") { 115 | clearTimeout(timeout); 116 | timeout = setTimeout(instance.stop, options.timeout); 117 | } 118 | if (typeof options.callback === "function") { 119 | options.callback.apply(null, [ instance ]); 120 | } 121 | }, false); 122 | } 123 | })(); 124 | } 125 | } 126 | function stopAll() { 127 | for (var i = 0, len = ALL_INSTANCES.length; i < len; i++) { 128 | ALL_INSTANCES[i].stop(); 129 | } 130 | } 131 | function createSpinner(button) { 132 | var height = button.offsetHeight, spinnerColor; 133 | if (height > 32) { 134 | height *= .8; 135 | } 136 | if (button.hasAttribute("data-spinner-size")) { 137 | height = parseInt(button.getAttribute("data-spinner-size"), 10); 138 | } 139 | if (button.hasAttribute("data-spinner-color")) { 140 | spinnerColor = button.getAttribute("data-spinner-color"); 141 | } 142 | var lines = 12, radius = height * .2, length = radius * .6, width = radius < 7 ? 2 : 3; 143 | return new Spinner({ 144 | color: spinnerColor || "#fff", 145 | lines: lines, 146 | radius: radius, 147 | length: length, 148 | width: width, 149 | zIndex: "auto", 150 | top: "50%", 151 | left: "50%", 152 | className: "" 153 | }); 154 | } 155 | function toArray(nodes) { 156 | var a = []; 157 | for (var i = 0; i < nodes.length; i++) { 158 | a.push(nodes[i]); 159 | } 160 | return a; 161 | } 162 | return { 163 | bind: bind, 164 | create: create, 165 | stopAll: stopAll 166 | }; 167 | }); 168 | -------------------------------------------------------------------------------- /dist/ladda-themeless.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Ladda 3 | * http://lab.hakim.se/ladda 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2014 Hakim El Hattab, http://hakim.se 7 | */.ladda-button{position:relative}.ladda-button .ladda-spinner{position:absolute;z-index:2;display:inline-block;width:32px;height:32px;top:50%;margin-top:0;opacity:0;pointer-events:none}.ladda-button .ladda-label{position:relative;z-index:3}.ladda-button .ladda-progress{position:absolute;width:0;height:100%;left:0;top:0;background:rgba(0,0,0,0.2);visibility:hidden;opacity:0;-webkit-transition:0.1s linear all !important;-moz-transition:0.1s linear all !important;-ms-transition:0.1s linear all !important;-o-transition:0.1s linear all !important;transition:0.1s linear all !important}.ladda-button[data-loading] .ladda-progress{opacity:1;visibility:visible}.ladda-button,.ladda-button .ladda-spinner,.ladda-button .ladda-label{-webkit-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-moz-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-ms-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-o-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important}.ladda-button[data-style=zoom-in],.ladda-button[data-style=zoom-in] .ladda-spinner,.ladda-button[data-style=zoom-in] .ladda-label,.ladda-button[data-style=zoom-out],.ladda-button[data-style=zoom-out] .ladda-spinner,.ladda-button[data-style=zoom-out] .ladda-label{-webkit-transition:0.3s ease all !important;-moz-transition:0.3s ease all !important;-ms-transition:0.3s ease all !important;-o-transition:0.3s ease all !important;transition:0.3s ease all !important}.ladda-button[data-style=expand-right] .ladda-spinner{right:-6px}.ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-right][data-size="xs"] .ladda-spinner{right:-12px}.ladda-button[data-style=expand-right][data-loading]{padding-right:56px}.ladda-button[data-style=expand-right][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-right][data-loading][data-size="s"],.ladda-button[data-style=expand-right][data-loading][data-size="xs"]{padding-right:40px}.ladda-button[data-style=expand-left] .ladda-spinner{left:26px}.ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-left][data-size="xs"] .ladda-spinner{left:4px}.ladda-button[data-style=expand-left][data-loading]{padding-left:56px}.ladda-button[data-style=expand-left][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-left][data-loading][data-size="s"],.ladda-button[data-style=expand-left][data-loading][data-size="xs"]{padding-left:40px}.ladda-button[data-style=expand-up]{overflow:hidden}.ladda-button[data-style=expand-up] .ladda-spinner{top:-32px;left:50%;margin-left:0}.ladda-button[data-style=expand-up][data-loading]{padding-top:54px}.ladda-button[data-style=expand-up][data-loading] .ladda-spinner{opacity:1;top:26px;margin-top:0}.ladda-button[data-style=expand-up][data-loading][data-size="s"],.ladda-button[data-style=expand-up][data-loading][data-size="xs"]{padding-top:32px}.ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-up][data-loading][data-size="xs"] .ladda-spinner{top:4px}.ladda-button[data-style=expand-down]{overflow:hidden}.ladda-button[data-style=expand-down] .ladda-spinner{top:62px;left:50%;margin-left:0}.ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-down][data-size="xs"] .ladda-spinner{top:40px}.ladda-button[data-style=expand-down][data-loading]{padding-bottom:54px}.ladda-button[data-style=expand-down][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-down][data-loading][data-size="s"],.ladda-button[data-style=expand-down][data-loading][data-size="xs"]{padding-bottom:32px}.ladda-button[data-style=slide-left]{overflow:hidden}.ladda-button[data-style=slide-left] .ladda-label{position:relative}.ladda-button[data-style=slide-left] .ladda-spinner{left:100%;margin-left:0}.ladda-button[data-style=slide-left][data-loading] .ladda-label{opacity:0;left:-100%}.ladda-button[data-style=slide-left][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-right]{overflow:hidden}.ladda-button[data-style=slide-right] .ladda-label{position:relative}.ladda-button[data-style=slide-right] .ladda-spinner{right:100%;margin-left:0;left:16px}.ladda-button[data-style=slide-right][data-loading] .ladda-label{opacity:0;left:100%}.ladda-button[data-style=slide-right][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-up]{overflow:hidden}.ladda-button[data-style=slide-up] .ladda-label{position:relative}.ladda-button[data-style=slide-up] .ladda-spinner{left:50%;margin-left:0;margin-top:1em}.ladda-button[data-style=slide-up][data-loading] .ladda-label{opacity:0;top:-1em}.ladda-button[data-style=slide-up][data-loading] .ladda-spinner{opacity:1;margin-top:0}.ladda-button[data-style=slide-down]{overflow:hidden}.ladda-button[data-style=slide-down] .ladda-label{position:relative}.ladda-button[data-style=slide-down] .ladda-spinner{left:50%;margin-left:0;margin-top:-2em}.ladda-button[data-style=slide-down][data-loading] .ladda-label{opacity:0;top:1em}.ladda-button[data-style=slide-down][data-loading] .ladda-spinner{opacity:1;margin-top:0}.ladda-button[data-style=zoom-out]{overflow:hidden}.ladda-button[data-style=zoom-out] .ladda-spinner{left:50%;margin-left:32px;-webkit-transform:scale(2.5);-moz-transform:scale(2.5);-ms-transform:scale(2.5);-o-transform:scale(2.5);transform:scale(2.5)}.ladda-button[data-style=zoom-out] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-out][data-loading] .ladda-label{opacity:0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner{opacity:1;margin-left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.ladda-button[data-style=zoom-in]{overflow:hidden}.ladda-button[data-style=zoom-in] .ladda-spinner{left:50%;margin-left:-16px;-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2)}.ladda-button[data-style=zoom-in] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-in][data-loading] .ladda-label{opacity:0;-webkit-transform:scale(2.2);-moz-transform:scale(2.2);-ms-transform:scale(2.2);-o-transform:scale(2.2);transform:scale(2.2)}.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner{opacity:1;margin-left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.ladda-button[data-style=contract]{overflow:hidden;width:100px}.ladda-button[data-style=contract] .ladda-spinner{left:50%;margin-left:0}.ladda-button[data-style=contract][data-loading]{border-radius:50%;width:52px}.ladda-button[data-style=contract][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=contract-overlay]{overflow:hidden;width:100px;box-shadow:0px 0px 0px 2000px transparent}.ladda-button[data-style=contract-overlay] .ladda-spinner{left:50%;margin-left:0}.ladda-button[data-style=contract-overlay][data-loading]{border-radius:50%;width:52px;box-shadow:0px 0px 0px 2000px rgba(0,0,0,0.8)}.ladda-button[data-style=contract-overlay][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner{opacity:1} 8 | -------------------------------------------------------------------------------- /dist/ladda.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Ladda 3 | * http://lab.hakim.se/ladda 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2014 Hakim El Hattab, http://hakim.se 7 | */.ladda-button{position:relative}.ladda-button .ladda-spinner{position:absolute;z-index:2;display:inline-block;width:32px;height:32px;top:50%;margin-top:0;opacity:0;pointer-events:none}.ladda-button .ladda-label{position:relative;z-index:3}.ladda-button .ladda-progress{position:absolute;width:0;height:100%;left:0;top:0;background:rgba(0,0,0,0.2);visibility:hidden;opacity:0;-webkit-transition:0.1s linear all !important;-moz-transition:0.1s linear all !important;-ms-transition:0.1s linear all !important;-o-transition:0.1s linear all !important;transition:0.1s linear all !important}.ladda-button[data-loading] .ladda-progress{opacity:1;visibility:visible}.ladda-button,.ladda-button .ladda-spinner,.ladda-button .ladda-label{-webkit-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-moz-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-ms-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-o-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important}.ladda-button[data-style=zoom-in],.ladda-button[data-style=zoom-in] .ladda-spinner,.ladda-button[data-style=zoom-in] .ladda-label,.ladda-button[data-style=zoom-out],.ladda-button[data-style=zoom-out] .ladda-spinner,.ladda-button[data-style=zoom-out] .ladda-label{-webkit-transition:0.3s ease all !important;-moz-transition:0.3s ease all !important;-ms-transition:0.3s ease all !important;-o-transition:0.3s ease all !important;transition:0.3s ease all !important}.ladda-button[data-style=expand-right] .ladda-spinner{right:-6px}.ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-right][data-size="xs"] .ladda-spinner{right:-12px}.ladda-button[data-style=expand-right][data-loading]{padding-right:56px}.ladda-button[data-style=expand-right][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-right][data-loading][data-size="s"],.ladda-button[data-style=expand-right][data-loading][data-size="xs"]{padding-right:40px}.ladda-button[data-style=expand-left] .ladda-spinner{left:26px}.ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-left][data-size="xs"] .ladda-spinner{left:4px}.ladda-button[data-style=expand-left][data-loading]{padding-left:56px}.ladda-button[data-style=expand-left][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-left][data-loading][data-size="s"],.ladda-button[data-style=expand-left][data-loading][data-size="xs"]{padding-left:40px}.ladda-button[data-style=expand-up]{overflow:hidden}.ladda-button[data-style=expand-up] .ladda-spinner{top:-32px;left:50%;margin-left:0}.ladda-button[data-style=expand-up][data-loading]{padding-top:54px}.ladda-button[data-style=expand-up][data-loading] .ladda-spinner{opacity:1;top:26px;margin-top:0}.ladda-button[data-style=expand-up][data-loading][data-size="s"],.ladda-button[data-style=expand-up][data-loading][data-size="xs"]{padding-top:32px}.ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-up][data-loading][data-size="xs"] .ladda-spinner{top:4px}.ladda-button[data-style=expand-down]{overflow:hidden}.ladda-button[data-style=expand-down] .ladda-spinner{top:62px;left:50%;margin-left:0}.ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-down][data-size="xs"] .ladda-spinner{top:40px}.ladda-button[data-style=expand-down][data-loading]{padding-bottom:54px}.ladda-button[data-style=expand-down][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-down][data-loading][data-size="s"],.ladda-button[data-style=expand-down][data-loading][data-size="xs"]{padding-bottom:32px}.ladda-button[data-style=slide-left]{overflow:hidden}.ladda-button[data-style=slide-left] .ladda-label{position:relative}.ladda-button[data-style=slide-left] .ladda-spinner{left:100%;margin-left:0}.ladda-button[data-style=slide-left][data-loading] .ladda-label{opacity:0;left:-100%}.ladda-button[data-style=slide-left][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-right]{overflow:hidden}.ladda-button[data-style=slide-right] .ladda-label{position:relative}.ladda-button[data-style=slide-right] .ladda-spinner{right:100%;margin-left:0;left:16px}.ladda-button[data-style=slide-right][data-loading] .ladda-label{opacity:0;left:100%}.ladda-button[data-style=slide-right][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-up]{overflow:hidden}.ladda-button[data-style=slide-up] .ladda-label{position:relative}.ladda-button[data-style=slide-up] .ladda-spinner{left:50%;margin-left:0;margin-top:1em}.ladda-button[data-style=slide-up][data-loading] .ladda-label{opacity:0;top:-1em}.ladda-button[data-style=slide-up][data-loading] .ladda-spinner{opacity:1;margin-top:0}.ladda-button[data-style=slide-down]{overflow:hidden}.ladda-button[data-style=slide-down] .ladda-label{position:relative}.ladda-button[data-style=slide-down] .ladda-spinner{left:50%;margin-left:0;margin-top:-2em}.ladda-button[data-style=slide-down][data-loading] .ladda-label{opacity:0;top:1em}.ladda-button[data-style=slide-down][data-loading] .ladda-spinner{opacity:1;margin-top:0}.ladda-button[data-style=zoom-out]{overflow:hidden}.ladda-button[data-style=zoom-out] .ladda-spinner{left:50%;margin-left:32px;-webkit-transform:scale(2.5);-moz-transform:scale(2.5);-ms-transform:scale(2.5);-o-transform:scale(2.5);transform:scale(2.5)}.ladda-button[data-style=zoom-out] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-out][data-loading] .ladda-label{opacity:0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner{opacity:1;margin-left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.ladda-button[data-style=zoom-in]{overflow:hidden}.ladda-button[data-style=zoom-in] .ladda-spinner{left:50%;margin-left:-16px;-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2)}.ladda-button[data-style=zoom-in] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-in][data-loading] .ladda-label{opacity:0;-webkit-transform:scale(2.2);-moz-transform:scale(2.2);-ms-transform:scale(2.2);-o-transform:scale(2.2);transform:scale(2.2)}.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner{opacity:1;margin-left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.ladda-button[data-style=contract]{overflow:hidden;width:100px}.ladda-button[data-style=contract] .ladda-spinner{left:50%;margin-left:0}.ladda-button[data-style=contract][data-loading]{border-radius:50%;width:52px}.ladda-button[data-style=contract][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=contract-overlay]{overflow:hidden;width:100px;box-shadow:0px 0px 0px 2000px transparent}.ladda-button[data-style=contract-overlay] .ladda-spinner{left:50%;margin-left:0}.ladda-button[data-style=contract-overlay][data-loading]{border-radius:50%;width:52px;box-shadow:0px 0px 0px 2000px rgba(0,0,0,0.8)}.ladda-button[data-style=contract-overlay][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner{opacity:1}.ladda-button{background:#666;border:0;padding:14px 18px;font-size:18px;cursor:pointer;color:#fff;border-radius:2px;border:1px solid transparent;-webkit-appearance:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}.ladda-button:hover{border-color:rgba(0,0,0,0.07);background-color:#888}.ladda-button[data-color=green]{background:#2aca76}.ladda-button[data-color=green]:hover{background-color:#38d683}.ladda-button[data-color=blue]{background:#53b5e6}.ladda-button[data-color=blue]:hover{background-color:#69bfe9}.ladda-button[data-color=red]{background:#ea8557}.ladda-button[data-color=red]:hover{background-color:#ed956e}.ladda-button[data-color=purple]{background:#9973c2}.ladda-button[data-color=purple]:hover{background-color:#a685ca}.ladda-button[data-color=mint]{background:#16a085}.ladda-button[data-color=mint]:hover{background-color:#19b698}.ladda-button[disabled],.ladda-button[data-loading]{border-color:rgba(0,0,0,0.07);cursor:default;background-color:#999}.ladda-button[disabled]:hover,.ladda-button[data-loading]:hover{cursor:default;background-color:#999}.ladda-button[data-size=xs]{padding:4px 8px}.ladda-button[data-size=xs] .ladda-label{font-size:0.7em}.ladda-button[data-size=s]{padding:6px 10px}.ladda-button[data-size=s] .ladda-label{font-size:0.9em}.ladda-button[data-size=l] .ladda-label{font-size:1.2em}.ladda-button[data-size=xl] .ladda-label{font-size:1.5em} 8 | -------------------------------------------------------------------------------- /dist/spin.js: -------------------------------------------------------------------------------- 1 | (function(root, factory) { 2 | if (typeof exports == "object") module.exports = factory(); else if (typeof define == "function" && define.amd) define(factory); else root.Spinner = factory(); 3 | })(this, function() { 4 | "use strict"; 5 | var prefixes = [ "webkit", "Moz", "ms", "O" ], animations = {}, useCssAnimations; 6 | function createEl(tag, prop) { 7 | var el = document.createElement(tag || "div"), n; 8 | for (n in prop) el[n] = prop[n]; 9 | return el; 10 | } 11 | function ins(parent) { 12 | for (var i = 1, n = arguments.length; i < n; i++) parent.appendChild(arguments[i]); 13 | return parent; 14 | } 15 | var sheet = function() { 16 | var el = createEl("style", { 17 | type: "text/css" 18 | }); 19 | ins(document.getElementsByTagName("head")[0], el); 20 | return el.sheet || el.styleSheet; 21 | }(); 22 | function addAnimation(alpha, trail, i, lines) { 23 | var name = [ "opacity", trail, ~~(alpha * 100), i, lines ].join("-"), start = .01 + i / lines * 100, z = Math.max(1 - (1 - alpha) / trail * (100 - start), alpha), prefix = useCssAnimations.substring(0, useCssAnimations.indexOf("Animation")).toLowerCase(), pre = prefix && "-" + prefix + "-" || ""; 24 | if (!animations[name]) { 25 | sheet.insertRule("@" + pre + "keyframes " + name + "{" + "0%{opacity:" + z + "}" + start + "%{opacity:" + alpha + "}" + (start + .01) + "%{opacity:1}" + (start + trail) % 100 + "%{opacity:" + alpha + "}" + "100%{opacity:" + z + "}" + "}", sheet.cssRules.length); 26 | animations[name] = 1; 27 | } 28 | return name; 29 | } 30 | function vendor(el, prop) { 31 | var s = el.style, pp, i; 32 | prop = prop.charAt(0).toUpperCase() + prop.slice(1); 33 | for (i = 0; i < prefixes.length; i++) { 34 | pp = prefixes[i] + prop; 35 | if (s[pp] !== undefined) return pp; 36 | } 37 | if (s[prop] !== undefined) return prop; 38 | } 39 | function css(el, prop) { 40 | for (var n in prop) el.style[vendor(el, n) || n] = prop[n]; 41 | return el; 42 | } 43 | function merge(obj) { 44 | for (var i = 1; i < arguments.length; i++) { 45 | var def = arguments[i]; 46 | for (var n in def) if (obj[n] === undefined) obj[n] = def[n]; 47 | } 48 | return obj; 49 | } 50 | function pos(el) { 51 | var o = { 52 | x: el.offsetLeft, 53 | y: el.offsetTop 54 | }; 55 | while (el = el.offsetParent) o.x += el.offsetLeft, o.y += el.offsetTop; 56 | return o; 57 | } 58 | function getColor(color, idx) { 59 | return typeof color == "string" ? color : color[idx % color.length]; 60 | } 61 | var defaults = { 62 | lines: 12, 63 | length: 7, 64 | width: 5, 65 | radius: 10, 66 | rotate: 0, 67 | corners: 1, 68 | color: "#000", 69 | direction: 1, 70 | speed: 1, 71 | trail: 100, 72 | opacity: 1 / 4, 73 | fps: 20, 74 | zIndex: 2e9, 75 | className: "spinner", 76 | top: "50%", 77 | left: "50%", 78 | position: "absolute" 79 | }; 80 | function Spinner(o) { 81 | this.opts = merge(o || {}, Spinner.defaults, defaults); 82 | } 83 | Spinner.defaults = {}; 84 | merge(Spinner.prototype, { 85 | spin: function(target) { 86 | this.stop(); 87 | var self = this, o = self.opts, el = self.el = css(createEl(0, { 88 | className: o.className 89 | }), { 90 | position: o.position, 91 | width: 0, 92 | zIndex: o.zIndex 93 | }), mid = o.radius + o.length + o.width; 94 | css(el, { 95 | left: o.left, 96 | top: o.top 97 | }); 98 | if (target) { 99 | target.insertBefore(el, target.firstChild || null); 100 | } 101 | el.setAttribute("role", "progressbar"); 102 | self.lines(el, self.opts); 103 | if (!useCssAnimations) { 104 | var i = 0, start = (o.lines - 1) * (1 - o.direction) / 2, alpha, fps = o.fps, f = fps / o.speed, ostep = (1 - o.opacity) / (f * o.trail / 100), astep = f / o.lines; 105 | (function anim() { 106 | i++; 107 | for (var j = 0; j < o.lines; j++) { 108 | alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity); 109 | self.opacity(el, j * o.direction + start, alpha, o); 110 | } 111 | self.timeout = self.el && setTimeout(anim, ~~(1e3 / fps)); 112 | })(); 113 | } 114 | return self; 115 | }, 116 | stop: function() { 117 | var el = this.el; 118 | if (el) { 119 | clearTimeout(this.timeout); 120 | if (el.parentNode) el.parentNode.removeChild(el); 121 | this.el = undefined; 122 | } 123 | return this; 124 | }, 125 | lines: function(el, o) { 126 | var i = 0, start = (o.lines - 1) * (1 - o.direction) / 2, seg; 127 | function fill(color, shadow) { 128 | return css(createEl(), { 129 | position: "absolute", 130 | width: o.length + o.width + "px", 131 | height: o.width + "px", 132 | background: color, 133 | boxShadow: shadow, 134 | transformOrigin: "left", 135 | transform: "rotate(" + ~~(360 / o.lines * i + o.rotate) + "deg) translate(" + o.radius + "px" + ",0)", 136 | borderRadius: (o.corners * o.width >> 1) + "px" 137 | }); 138 | } 139 | for (;i < o.lines; i++) { 140 | seg = css(createEl(), { 141 | position: "absolute", 142 | top: 1 + ~(o.width / 2) + "px", 143 | transform: o.hwaccel ? "translate3d(0,0,0)" : "", 144 | opacity: o.opacity, 145 | animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + " " + 1 / o.speed + "s linear infinite" 146 | }); 147 | if (o.shadow) ins(seg, css(fill("#000", "0 0 4px " + "#000"), { 148 | top: 2 + "px" 149 | })); 150 | ins(el, ins(seg, fill(getColor(o.color, i), "0 0 1px rgba(0,0,0,.1)"))); 151 | } 152 | return el; 153 | }, 154 | opacity: function(el, i, val) { 155 | if (i < el.childNodes.length) el.childNodes[i].style.opacity = val; 156 | } 157 | }); 158 | function initVML() { 159 | function vml(tag, attr) { 160 | return createEl("<" + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr); 161 | } 162 | sheet.addRule(".spin-vml", "behavior:url(#default#VML)"); 163 | Spinner.prototype.lines = function(el, o) { 164 | var r = o.length + o.width, s = 2 * r; 165 | function grp() { 166 | return css(vml("group", { 167 | coordsize: s + " " + s, 168 | coordorigin: -r + " " + -r 169 | }), { 170 | width: s, 171 | height: s 172 | }); 173 | } 174 | var margin = -(o.width + o.length) * 2 + "px", g = css(grp(), { 175 | position: "absolute", 176 | top: margin, 177 | left: margin 178 | }), i; 179 | function seg(i, dx, filter) { 180 | ins(g, ins(css(grp(), { 181 | rotation: 360 / o.lines * i + "deg", 182 | left: ~~dx 183 | }), ins(css(vml("roundrect", { 184 | arcsize: o.corners 185 | }), { 186 | width: r, 187 | height: o.width, 188 | left: o.radius, 189 | top: -o.width >> 1, 190 | filter: filter 191 | }), vml("fill", { 192 | color: getColor(o.color, i), 193 | opacity: o.opacity 194 | }), vml("stroke", { 195 | opacity: 0 196 | })))); 197 | } 198 | if (o.shadow) for (i = 1; i <= o.lines; i++) seg(i, -2, "progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)"); 199 | for (i = 1; i <= o.lines; i++) seg(i); 200 | return ins(el, g); 201 | }; 202 | Spinner.prototype.opacity = function(el, i, val, o) { 203 | var c = el.firstChild; 204 | o = o.shadow && o.lines || 0; 205 | if (c && i + o < c.childNodes.length) { 206 | c = c.childNodes[i + o]; 207 | c = c && c.firstChild; 208 | c = c && c.firstChild; 209 | if (c) c.opacity = val; 210 | } 211 | }; 212 | } 213 | var probe = css(createEl("group"), { 214 | behavior: "url(#default#VML)" 215 | }); 216 | if (!vendor(probe, "transform") && probe.adj) initVML(); else useCssAnimations = vendor(probe, "animation"); 217 | return Spinner; 218 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ladda for Bootstrap 3 UI 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 |

Ladda UI for Bootstrap 3

30 |

31 | This project was made by @msurguy and is used on the new Bootsnipp - a playground and collection of snippets for Bootstrap. 32 |

33 |

34 | Original UI concept by @hakimel 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. 35 |

36 |

Demo Click the buttons to see the effect

37 |
38 |
39 |
40 |
41 |

42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |

50 |
51 |
52 |
53 |
54 |

55 | 56 | 57 | 58 |

59 |
60 |
61 |
62 |
63 |

64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |

72 |

73 |
74 |
75 |
76 |
77 |

Built-in progress bar

78 |

79 | 80 | 81 | 82 | 83 | 84 |

85 |
86 |
87 |
88 |
89 |

Sizes

90 |

91 | 92 | 93 | 94 | 95 | 96 |

97 |
98 |
99 | 100 |
101 |
102 |

Usage:

103 |
104 |

Include the CSS and Javascript for Spin.js and Ladda effect:

105 | 
<link rel="stylesheet" href="dist/ladda-themeless.min.css">
106 | <script src="dist/spin.min.js"></script>
107 | <script src="dist/ladda.min.js"></script>
108 |

Then to produce a button with the Ladda effect:

109 | 
<button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>
110 |

Or using "a" tag:

111 | 
<a href="#" class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></a>
112 |

You can choose the style of the effect by setting the data-style attribute:

113 | 
data-style="expand-left"
114 | data-style="expand-left"
115 | data-style="expand-right"
116 | data-style="expand-up"
117 | data-style="zoom-in"
118 | data-style="zoom-out"
119 | data-style="slide-left"
120 | data-style="slide-right"
121 | data-style="slide-up"
122 | data-style="slide-down"
123 | data-style="contract"
124 |

You can choose the size of the spinner by setting the data-size attribute:

125 | 
data-size="xs"
126 | data-size="s"
127 | data-size="l"						
128 |
129 |

You can choose the color of the spinner by setting the data-spinner-color attribute (HEX code):

130 | 
data-spinner-color="#FF0000"
131 | 132 |

Control the UI state with Javascript:

133 |

To activate the effect you can bind Ladda to all buttons that submit a form

134 | 
Ladda.bind( 'input[type=submit]' );
135 |

When using AJAX forms, you can use the following syntax:

136 | 
<a href="#" id="form-submit" class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"><span class="ladda-label">Submit form</span></a>
137 | 
$(function() {
138 | 	$('#form-submit').click(function(e){
139 | 	 	e.preventDefault();
140 | 	 	var l = Ladda.create(this);
141 | 	 	l.start();
142 | 	 	$.post("your-url", 
143 | 	 	    { data : data },
144 | 	 	  function(response){
145 | 	 	    console.log(response);
146 | 	 	  }, "json")
147 | 	 	.always(function() { l.stop(); });
148 | 	 	return false;
149 | 	});
150 | });
151 |

Other methods available through Javascript

152 | 
l.stop();
153 | l.toggle();
154 | l.isLoading();
155 | l.setProgress( 0-1 );
156 |

Love this? Tweet it! 157 |

158 |

159 | Original Ladda UI concept by Hakim El Hattab / @hakimel, examples adapted to work with Bootstrap 3 by @msurguy 160 |

161 |
162 |
163 | 164 |
165 | 166 | 167 | 168 | 169 | 201 | 202 | Fork me on GitHub 203 | 204 | 205 | 206 | 207 | 208 | 209 | -------------------------------------------------------------------------------- /css/ladda.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Ladda 3 | * http://lab.hakim.se/ladda 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2014 Hakim El Hattab, http://hakim.se 7 | */ 8 | 9 | 10 | /************************************* 11 | * CONFIG 12 | */ 13 | 14 | $spinnerSize: 32px; 15 | 16 | 17 | /************************************* 18 | * MIXINS 19 | */ 20 | 21 | @mixin prefix ( $property, $value ) { 22 | -webkit-#{$property}: $value; 23 | -moz-#{$property}: $value; 24 | -ms-#{$property}: $value; 25 | -o-#{$property}: $value; 26 | #{$property}: $value; 27 | } 28 | 29 | @mixin transition( $value ) { 30 | -webkit-transition: $value !important; // important to override bootstrap 31 | -moz-transition: $value !important; 32 | -ms-transition: $value !important; 33 | -o-transition: $value !important; 34 | transition: $value !important; 35 | } 36 | 37 | @mixin transform( $value ) { 38 | @include prefix( transform, $value ); 39 | } 40 | 41 | @mixin transform-origin( $value ) { 42 | @include prefix( transform-origin, $value ); 43 | } 44 | 45 | @mixin buttonColor( $name, $color ) { 46 | &[data-color=#{$name}] { 47 | background: $color; 48 | 49 | &:hover { 50 | background-color: lighten( $color, 5% ); 51 | } 52 | } 53 | } 54 | 55 | 56 | /************************************* 57 | * BUTTON BASE 58 | */ 59 | 60 | .ladda-button { 61 | position: relative; 62 | } 63 | 64 | 65 | /* Spinner animation */ 66 | .ladda-button .ladda-spinner { 67 | position: absolute; 68 | z-index: 2; 69 | display: inline-block; 70 | width: $spinnerSize; 71 | height: $spinnerSize; 72 | top: 50%; 73 | margin-top: 0; 74 | opacity: 0; 75 | pointer-events: none; 76 | } 77 | 78 | /* Button label */ 79 | .ladda-button .ladda-label { 80 | position: relative; 81 | z-index: 3; 82 | } 83 | 84 | /* Progress bar */ 85 | .ladda-button .ladda-progress { 86 | position: absolute; 87 | width: 0; 88 | height: 100%; 89 | left: 0; 90 | top: 0; 91 | background: rgba( 0, 0, 0, 0.2 ); 92 | 93 | visibility: hidden; 94 | opacity: 0; 95 | 96 | @include transition( 0.1s linear all ); 97 | } 98 | .ladda-button[data-loading] .ladda-progress { 99 | opacity: 1; 100 | visibility: visible; 101 | } 102 | 103 | 104 | /************************************* 105 | * EASING 106 | */ 107 | 108 | .ladda-button, 109 | .ladda-button .ladda-spinner, 110 | .ladda-button .ladda-label { 111 | @include transition( 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275) all ); 112 | } 113 | 114 | .ladda-button[data-style=zoom-in], 115 | .ladda-button[data-style=zoom-in] .ladda-spinner, 116 | .ladda-button[data-style=zoom-in] .ladda-label, 117 | .ladda-button[data-style=zoom-out], 118 | .ladda-button[data-style=zoom-out] .ladda-spinner, 119 | .ladda-button[data-style=zoom-out] .ladda-label { 120 | @include transition( 0.3s ease all ); 121 | } 122 | 123 | 124 | /************************************* 125 | * EXPAND LEFT 126 | */ 127 | 128 | .ladda-button[data-style=expand-right] { 129 | .ladda-spinner { 130 | right: $spinnerSize/-2 + 10; 131 | } 132 | 133 | &[data-size="s"] .ladda-spinner, 134 | &[data-size="xs"] .ladda-spinner { 135 | right: $spinnerSize/-2 + 4; 136 | } 137 | 138 | &[data-loading] { 139 | padding-right: 56px; 140 | 141 | .ladda-spinner { 142 | opacity: 1; 143 | } 144 | 145 | &[data-size="s"], 146 | &[data-size="xs"] { 147 | padding-right: 40px; 148 | } 149 | } 150 | } 151 | 152 | 153 | /************************************* 154 | * EXPAND RIGHT 155 | */ 156 | 157 | .ladda-button[data-style=expand-left] { 158 | .ladda-spinner { 159 | left: $spinnerSize/2 + 10; 160 | } 161 | 162 | &[data-size="s"] .ladda-spinner, 163 | &[data-size="xs"] .ladda-spinner { 164 | left: 4px; 165 | } 166 | 167 | &[data-loading] { 168 | padding-left: 56px; 169 | 170 | .ladda-spinner { 171 | opacity: 1; 172 | } 173 | 174 | &[data-size="s"], 175 | &[data-size="xs"] { 176 | padding-left: 40px; 177 | } 178 | } 179 | } 180 | 181 | 182 | /************************************* 183 | * EXPAND UP 184 | */ 185 | 186 | .ladda-button[data-style=expand-up] { 187 | overflow: hidden; 188 | 189 | .ladda-spinner { 190 | top: -$spinnerSize; 191 | left: 50%; 192 | margin-left: 0; 193 | } 194 | 195 | &[data-loading] { 196 | padding-top: 54px; 197 | 198 | .ladda-spinner { 199 | opacity: 1; 200 | top: ($spinnerSize/ 2) + 10; 201 | margin-top: 0; 202 | } 203 | 204 | &[data-size="s"], 205 | &[data-size="xs"] { 206 | padding-top: 32px; 207 | 208 | .ladda-spinner { 209 | top: 4px; 210 | } 211 | } 212 | } 213 | } 214 | 215 | 216 | /************************************* 217 | * EXPAND DOWN 218 | */ 219 | 220 | .ladda-button[data-style=expand-down] { 221 | overflow: hidden; 222 | 223 | .ladda-spinner { 224 | top: 62px; 225 | left: 50%; 226 | margin-left: 0; 227 | } 228 | 229 | &[data-size="s"] .ladda-spinner, 230 | &[data-size="xs"] .ladda-spinner { 231 | top: 40px; 232 | } 233 | 234 | &[data-loading] { 235 | padding-bottom: 54px; 236 | 237 | .ladda-spinner { 238 | opacity: 1; 239 | } 240 | 241 | &[data-size="s"], 242 | &[data-size="xs"] { 243 | padding-bottom: 32px; 244 | } 245 | } 246 | } 247 | 248 | 249 | /************************************* 250 | * SLIDE LEFT 251 | */ 252 | .ladda-button[data-style=slide-left] { 253 | overflow: hidden; 254 | 255 | .ladda-label { 256 | position: relative; 257 | } 258 | .ladda-spinner { 259 | left: 100%; 260 | margin-left: 0; 261 | } 262 | 263 | &[data-loading] { 264 | .ladda-label { 265 | opacity: 0; 266 | left: -100%; 267 | } 268 | .ladda-spinner { 269 | opacity: 1; 270 | left: 50%; 271 | } 272 | } 273 | } 274 | 275 | 276 | /************************************* 277 | * SLIDE RIGHT 278 | */ 279 | .ladda-button[data-style=slide-right] { 280 | overflow: hidden; 281 | 282 | .ladda-label { 283 | position: relative; 284 | } 285 | .ladda-spinner { 286 | right: 100%; 287 | margin-left: 0; 288 | left: $spinnerSize/2 289 | } 290 | 291 | &[data-loading] { 292 | .ladda-label { 293 | opacity: 0; 294 | left: 100%; 295 | } 296 | .ladda-spinner { 297 | opacity: 1; 298 | left: 50%; 299 | } 300 | } 301 | } 302 | 303 | 304 | /************************************* 305 | * SLIDE UP 306 | */ 307 | .ladda-button[data-style=slide-up] { 308 | overflow: hidden; 309 | 310 | .ladda-label { 311 | position: relative; 312 | } 313 | .ladda-spinner { 314 | left: 50%; 315 | margin-left: 0; 316 | margin-top: 1em; 317 | } 318 | 319 | &[data-loading] { 320 | .ladda-label { 321 | opacity: 0; 322 | top: -1em; 323 | } 324 | .ladda-spinner { 325 | opacity: 1; 326 | margin-top: 0; 327 | } 328 | } 329 | } 330 | 331 | 332 | /************************************* 333 | * SLIDE DOWN 334 | */ 335 | .ladda-button[data-style=slide-down] { 336 | overflow: hidden; 337 | 338 | .ladda-label { 339 | position: relative; 340 | } 341 | .ladda-spinner { 342 | left: 50%; 343 | margin-left: 0; 344 | margin-top: -2em; 345 | } 346 | 347 | &[data-loading] { 348 | .ladda-label { 349 | opacity: 0; 350 | top: 1em; 351 | } 352 | .ladda-spinner { 353 | opacity: 1; 354 | margin-top: 0; 355 | } 356 | } 357 | } 358 | 359 | 360 | /************************************* 361 | * ZOOM-OUT 362 | */ 363 | 364 | .ladda-button[data-style=zoom-out] { 365 | overflow: hidden; 366 | } 367 | .ladda-button[data-style=zoom-out] .ladda-spinner { 368 | left: 50%; 369 | margin-left: $spinnerSize; 370 | 371 | @include transform( scale( 2.5 ) ); 372 | } 373 | .ladda-button[data-style=zoom-out] .ladda-label { 374 | position: relative; 375 | display: inline-block; 376 | } 377 | 378 | .ladda-button[data-style=zoom-out][data-loading] .ladda-label { 379 | opacity: 0; 380 | 381 | @include transform( scale( 0.5 ) ); 382 | } 383 | .ladda-button[data-style=zoom-out][data-loading] .ladda-spinner { 384 | opacity: 1; 385 | margin-left: 0; 386 | 387 | @include transform( none ); 388 | } 389 | 390 | 391 | /************************************* 392 | * ZOOM-IN 393 | */ 394 | 395 | .ladda-button[data-style=zoom-in] { 396 | overflow: hidden; 397 | } 398 | .ladda-button[data-style=zoom-in] .ladda-spinner { 399 | left: 50%; 400 | margin-left: $spinnerSize/-2; 401 | 402 | @include transform( scale( 0.2 ) ); 403 | } 404 | .ladda-button[data-style=zoom-in] .ladda-label { 405 | position: relative; 406 | display: inline-block; 407 | } 408 | 409 | .ladda-button[data-style=zoom-in][data-loading] .ladda-label { 410 | opacity: 0; 411 | 412 | @include transform( scale( 2.2 ) ); 413 | } 414 | .ladda-button[data-style=zoom-in][data-loading] .ladda-spinner { 415 | opacity: 1; 416 | margin-left: 0; 417 | 418 | @include transform( none ); 419 | } 420 | 421 | 422 | /************************************* 423 | * CONTRACT 424 | */ 425 | 426 | .ladda-button[data-style=contract] { 427 | overflow: hidden; 428 | width: 100px; 429 | } 430 | .ladda-button[data-style=contract] .ladda-spinner { 431 | left: 50%; 432 | margin-left: 0; 433 | } 434 | 435 | .ladda-button[data-style=contract][data-loading] { 436 | border-radius: 50%; 437 | width: 52px; 438 | } 439 | .ladda-button[data-style=contract][data-loading] .ladda-label { 440 | opacity: 0; 441 | } 442 | .ladda-button[data-style=contract][data-loading] .ladda-spinner { 443 | opacity: 1; 444 | } 445 | 446 | 447 | 448 | /************************************* 449 | * OVERLAY 450 | */ 451 | 452 | .ladda-button[data-style=contract-overlay] { 453 | overflow: hidden; 454 | width: 100px; 455 | 456 | box-shadow: 0px 0px 0px 2000px rgba(0,0,0,0); 457 | } 458 | .ladda-button[data-style=contract-overlay] .ladda-spinner { 459 | left: 50%; 460 | margin-left: 0; 461 | } 462 | 463 | .ladda-button[data-style=contract-overlay][data-loading] { 464 | border-radius: 50%; 465 | width: 52px; 466 | 467 | /*outline: 10000px solid rgba( 0, 0, 0, 0.5 );*/ 468 | box-shadow: 0px 0px 0px 2000px rgba(0,0,0,0.8); 469 | } 470 | .ladda-button[data-style=contract-overlay][data-loading] .ladda-label { 471 | opacity: 0; 472 | } 473 | .ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner { 474 | opacity: 1; 475 | } 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | -------------------------------------------------------------------------------- /js/ladda.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Ladda 3 | * http://lab.hakim.se/ladda 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2014 Hakim El Hattab, http://hakim.se 7 | */ 8 | /* jshint node:true, browser:true */ 9 | (function( root, factory ) { 10 | 11 | // CommonJS 12 | if( typeof exports === 'object' ) { 13 | module.exports = factory(require('spin.js')); 14 | } 15 | // AMD module 16 | else if( typeof define === 'function' && define.amd ) { 17 | define( [ 'spin' ], factory ); 18 | } 19 | // Browser global 20 | else { 21 | root.Ladda = factory( root.Spinner ); 22 | } 23 | 24 | } 25 | (this, function( Spinner ) { 26 | 'use strict'; 27 | 28 | // All currently instantiated instances of Ladda 29 | var ALL_INSTANCES = []; 30 | 31 | /** 32 | * Creates a new instance of Ladda which wraps the 33 | * target button element. 34 | * 35 | * @return An API object that can be used to control 36 | * the loading animation state. 37 | */ 38 | function create( button ) { 39 | 40 | if( typeof button === 'undefined' ) { 41 | console.warn( "Ladda button target must be defined." ); 42 | return; 43 | } 44 | 45 | // The text contents must be wrapped in a ladda-label 46 | // element, create one if it doesn't already exist 47 | if( !button.querySelector( '.ladda-label' ) ) { 48 | button.innerHTML = ''+ button.innerHTML +''; 49 | } 50 | 51 | // The spinner component 52 | var spinner; 53 | 54 | // Wrapper element for the spinner 55 | var spinnerWrapper = document.createElement( 'span' ); 56 | spinnerWrapper.className = 'ladda-spinner'; 57 | button.appendChild( spinnerWrapper ); 58 | 59 | // Timer used to delay starting/stopping 60 | var timer; 61 | 62 | var instance = { 63 | 64 | /** 65 | * Enter the loading state. 66 | */ 67 | start: function() { 68 | 69 | // Create the spinner if it doesn't already exist 70 | if( !spinner ) spinner = createSpinner( button ); 71 | 72 | button.setAttribute( 'disabled', '' ); 73 | button.setAttribute( 'data-loading', '' ); 74 | 75 | clearTimeout( timer ); 76 | spinner.spin( spinnerWrapper ); 77 | 78 | this.setProgress( 0 ); 79 | 80 | return this; // chain 81 | 82 | }, 83 | 84 | /** 85 | * Enter the loading state, after a delay. 86 | */ 87 | startAfter: function( delay ) { 88 | 89 | clearTimeout( timer ); 90 | timer = setTimeout( function() { instance.start(); }, delay ); 91 | 92 | return this; // chain 93 | 94 | }, 95 | 96 | /** 97 | * Exit the loading state. 98 | */ 99 | stop: function() { 100 | 101 | button.removeAttribute( 'disabled' ); 102 | button.removeAttribute( 'data-loading' ); 103 | 104 | // Kill the animation after a delay to make sure it 105 | // runs for the duration of the button transition 106 | clearTimeout( timer ); 107 | 108 | if( spinner ) { 109 | timer = setTimeout( function() { spinner.stop(); }, 1000 ); 110 | } 111 | 112 | return this; // chain 113 | 114 | }, 115 | 116 | /** 117 | * Toggle the loading state on/off. 118 | */ 119 | toggle: function() { 120 | 121 | if( this.isLoading() ) { 122 | this.stop(); 123 | } 124 | else { 125 | this.start(); 126 | } 127 | 128 | return this; // chain 129 | 130 | }, 131 | 132 | /** 133 | * Sets the width of the visual progress bar inside of 134 | * this Ladda button 135 | * 136 | * @param {Number} progress in the range of 0-1 137 | */ 138 | setProgress: function( progress ) { 139 | 140 | // Cap it 141 | progress = Math.max( Math.min( progress, 1 ), 0 ); 142 | 143 | var progressElement = button.querySelector( '.ladda-progress' ); 144 | 145 | // Remove the progress bar if we're at 0 progress 146 | if( progress === 0 && progressElement && progressElement.parentNode ) { 147 | progressElement.parentNode.removeChild( progressElement ); 148 | } 149 | else { 150 | if( !progressElement ) { 151 | progressElement = document.createElement( 'div' ); 152 | progressElement.className = 'ladda-progress'; 153 | button.appendChild( progressElement ); 154 | } 155 | 156 | progressElement.style.width = ( ( progress || 0 ) * button.offsetWidth ) + 'px'; 157 | } 158 | 159 | }, 160 | 161 | enable: function() { 162 | 163 | this.stop(); 164 | 165 | return this; // chain 166 | 167 | }, 168 | 169 | disable: function () { 170 | 171 | this.stop(); 172 | button.setAttribute( 'disabled', '' ); 173 | 174 | return this; // chain 175 | 176 | }, 177 | 178 | isLoading: function() { 179 | 180 | return button.hasAttribute( 'data-loading' ); 181 | 182 | }, 183 | 184 | remove: function() { 185 | 186 | clearTimeout( timer ); 187 | 188 | button.removeAttribute( 'disabled', '' ); 189 | button.removeAttribute( 'data-loading', '' ); 190 | 191 | if( spinner ) { 192 | spinner.stop(); 193 | spinner = null; 194 | } 195 | 196 | for( var i = 0, len = ALL_INSTANCES.length; i < len; i++ ) { 197 | if( instance === ALL_INSTANCES[i] ) { 198 | ALL_INSTANCES.splice( i, 1 ); 199 | break; 200 | } 201 | } 202 | 203 | } 204 | 205 | }; 206 | 207 | ALL_INSTANCES.push( instance ); 208 | 209 | return instance; 210 | 211 | } 212 | 213 | /** 214 | * Get the first ancestor node from an element, having a 215 | * certain type. 216 | * 217 | * @param elem An HTML element 218 | * @param type an HTML tag type (uppercased) 219 | * 220 | * @return An HTML element 221 | */ 222 | function getAncestorOfTagType( elem, type ) { 223 | 224 | while ( elem.parentNode && elem.tagName !== type ) { 225 | elem = elem.parentNode; 226 | } 227 | 228 | return ( type === elem.tagName ) ? elem : undefined; 229 | 230 | } 231 | 232 | /** 233 | * Returns a list of all inputs in the given form that 234 | * have their `required` attribute set. 235 | * 236 | * @param form The from HTML element to look in 237 | * 238 | * @return A list of elements 239 | */ 240 | function getRequiredFields( form ) { 241 | 242 | var requirables = [ 'input', 'textarea' ]; 243 | var inputs = []; 244 | 245 | for( var i = 0; i < requirables.length; i++ ) { 246 | var candidates = form.getElementsByTagName( requirables[i] ); 247 | for( var j = 0; j < candidates.length; j++ ) { 248 | if ( candidates[j].hasAttribute( 'required' ) ) { 249 | inputs.push( candidates[j] ); 250 | } 251 | } 252 | } 253 | 254 | return inputs; 255 | 256 | } 257 | 258 | 259 | /** 260 | * Binds the target buttons to automatically enter the 261 | * loading state when clicked. 262 | * 263 | * @param target Either an HTML element or a CSS selector. 264 | * @param options 265 | * - timeout Number of milliseconds to wait before 266 | * automatically cancelling the animation. 267 | */ 268 | function bind( target, options ) { 269 | 270 | options = options || {}; 271 | 272 | var targets = []; 273 | 274 | if( typeof target === 'string' ) { 275 | targets = toArray( document.querySelectorAll( target ) ); 276 | } 277 | else if( typeof target === 'object' && typeof target.nodeName === 'string' ) { 278 | targets = [ target ]; 279 | } 280 | 281 | for( var i = 0, len = targets.length; i < len; i++ ) { 282 | 283 | (function() { 284 | var element = targets[i]; 285 | 286 | // Make sure we're working with a DOM element 287 | if( typeof element.addEventListener === 'function' ) { 288 | var instance = create( element ); 289 | var timeout = -1; 290 | 291 | element.addEventListener( 'click', function( event ) { 292 | 293 | // If the button belongs to a form, make sure all the 294 | // fields in that form are filled out 295 | var valid = true; 296 | var form = getAncestorOfTagType( element, 'FORM' ); 297 | 298 | if( typeof form !== 'undefined' ) { 299 | var requireds = getRequiredFields( form ); 300 | for( var i = 0; i < requireds.length; i++ ) { 301 | // Alternatively to this trim() check, 302 | // we could have use .checkValidity() or .validity.valid 303 | if( requireds[i].value.replace( /^\s+|\s+$/g, '' ) === '' ) { 304 | valid = false; 305 | } 306 | } 307 | } 308 | 309 | if( valid ) { 310 | // This is asynchronous to avoid an issue where setting 311 | // the disabled attribute on the button prevents forms 312 | // from submitting 313 | instance.startAfter( 1 ); 314 | 315 | // Set a loading timeout if one is specified 316 | if( typeof options.timeout === 'number' ) { 317 | clearTimeout( timeout ); 318 | timeout = setTimeout( instance.stop, options.timeout ); 319 | } 320 | 321 | // Invoke callbacks 322 | if( typeof options.callback === 'function' ) { 323 | options.callback.apply( null, [ instance ] ); 324 | } 325 | } 326 | 327 | }, false ); 328 | } 329 | })(); 330 | 331 | } 332 | 333 | } 334 | 335 | /** 336 | * Stops ALL current loading animations. 337 | */ 338 | function stopAll() { 339 | 340 | for( var i = 0, len = ALL_INSTANCES.length; i < len; i++ ) { 341 | ALL_INSTANCES[i].stop(); 342 | } 343 | 344 | } 345 | 346 | function createSpinner( button ) { 347 | 348 | var height = button.offsetHeight, 349 | spinnerColor; 350 | 351 | if( height === 0 ) { 352 | // We may have an element that is not visible so 353 | // we attempt to get the height in a different way 354 | height = parseFloat( window.getComputedStyle( button ).height ); 355 | } 356 | 357 | // If the button is tall we can afford some padding 358 | if( height > 32 ) { 359 | height *= 0.8; 360 | } 361 | 362 | // Prefer an explicit height if one is defined 363 | if( button.hasAttribute( 'data-spinner-size' ) ) { 364 | height = parseInt( button.getAttribute( 'data-spinner-size' ), 10 ); 365 | } 366 | 367 | // Allow buttons to specify the color of the spinner element 368 | if( button.hasAttribute( 'data-spinner-color' ) ) { 369 | spinnerColor = button.getAttribute( 'data-spinner-color' ); 370 | } 371 | 372 | var lines = 12, 373 | radius = height * 0.2, 374 | length = radius * 0.6, 375 | width = radius < 7 ? 2 : 3; 376 | 377 | return new Spinner( { 378 | color: spinnerColor || '#fff', 379 | lines: lines, 380 | radius: radius, 381 | length: length, 382 | width: width, 383 | zIndex: 'auto', 384 | top: 'auto', 385 | left: 'auto', 386 | className: '' 387 | } ); 388 | 389 | } 390 | 391 | function toArray( nodes ) { 392 | 393 | var a = []; 394 | 395 | for ( var i = 0; i < nodes.length; i++ ) { 396 | a.push( nodes[ i ] ); 397 | } 398 | 399 | return a; 400 | 401 | } 402 | 403 | // Public API 404 | return { 405 | 406 | bind: bind, 407 | create: create, 408 | stopAll: stopAll 409 | 410 | }; 411 | 412 | })); 413 | -------------------------------------------------------------------------------- /dist/ladda-themeless.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Ladda 3 | * http://lab.hakim.se/ladda 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2013 Hakim El Hattab, http://hakim.se 7 | */ 8 | /************************************* 9 | * CONFIG 10 | */ 11 | /************************************* 12 | * MIXINS 13 | */ 14 | /************************************* 15 | * BUTTON BASE 16 | */ 17 | .ladda-button { 18 | position: relative; } 19 | 20 | /* Spinner animation */ 21 | .ladda-button .ladda-spinner { 22 | position: absolute; 23 | z-index: 2; 24 | display: inline-block; 25 | width: 32px; 26 | height: 32px; 27 | top: 50%; 28 | margin-top: -16px; 29 | opacity: 0; 30 | pointer-events: none; } 31 | 32 | /* Button label */ 33 | .ladda-button .ladda-label { 34 | position: relative; 35 | z-index: 3; } 36 | 37 | /* Progress bar */ 38 | .ladda-button .ladda-progress { 39 | position: absolute; 40 | width: 0; 41 | height: 100%; 42 | left: 0; 43 | top: 0; 44 | background: rgba(0, 0, 0, 0.2); 45 | visibility: hidden; 46 | opacity: 0; 47 | -webkit-transition: 0.1s linear all !important; 48 | -moz-transition: 0.1s linear all !important; 49 | -ms-transition: 0.1s linear all !important; 50 | -o-transition: 0.1s linear all !important; 51 | transition: 0.1s linear all !important; } 52 | 53 | .ladda-button[data-loading] .ladda-progress { 54 | opacity: 1; 55 | visibility: visible; } 56 | 57 | /************************************* 58 | * EASING 59 | */ 60 | .ladda-button, 61 | .ladda-button .ladda-spinner, 62 | .ladda-button .ladda-label { 63 | -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; 64 | -moz-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; 65 | -ms-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; 66 | -o-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; 67 | transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; } 68 | 69 | .ladda-button[data-style=zoom-in], 70 | .ladda-button[data-style=zoom-in] .ladda-spinner, 71 | .ladda-button[data-style=zoom-in] .ladda-label, 72 | .ladda-button[data-style=zoom-out], 73 | .ladda-button[data-style=zoom-out] .ladda-spinner, 74 | .ladda-button[data-style=zoom-out] .ladda-label { 75 | -webkit-transition: 0.3s ease all !important; 76 | -moz-transition: 0.3s ease all !important; 77 | -ms-transition: 0.3s ease all !important; 78 | -o-transition: 0.3s ease all !important; 79 | transition: 0.3s ease all !important; } 80 | 81 | /************************************* 82 | * EXPAND LEFT 83 | */ 84 | .ladda-button[data-style=expand-right] .ladda-spinner { 85 | right: 14px; } 86 | .ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-right][data-size="xs"] .ladda-spinner { 87 | right: 4px; } 88 | .ladda-button[data-style=expand-right][data-loading] { 89 | padding-right: 56px; } 90 | .ladda-button[data-style=expand-right][data-loading] .ladda-spinner { 91 | opacity: 1; } 92 | .ladda-button[data-style=expand-right][data-loading][data-size="s"], .ladda-button[data-style=expand-right][data-loading][data-size="xs"] { 93 | padding-right: 40px; } 94 | 95 | /************************************* 96 | * EXPAND RIGHT 97 | */ 98 | .ladda-button[data-style=expand-left] .ladda-spinner { 99 | left: 14px; } 100 | .ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-left][data-size="xs"] .ladda-spinner { 101 | left: 4px; } 102 | .ladda-button[data-style=expand-left][data-loading] { 103 | padding-left: 56px; } 104 | .ladda-button[data-style=expand-left][data-loading] .ladda-spinner { 105 | opacity: 1; } 106 | .ladda-button[data-style=expand-left][data-loading][data-size="s"], .ladda-button[data-style=expand-left][data-loading][data-size="xs"] { 107 | padding-left: 40px; } 108 | 109 | /************************************* 110 | * EXPAND UP 111 | */ 112 | .ladda-button[data-style=expand-up] { 113 | overflow: hidden; } 114 | .ladda-button[data-style=expand-up] .ladda-spinner { 115 | top: -32px; 116 | left: 50%; 117 | margin-left: -16px; } 118 | .ladda-button[data-style=expand-up][data-loading] { 119 | padding-top: 54px; } 120 | .ladda-button[data-style=expand-up][data-loading] .ladda-spinner { 121 | opacity: 1; 122 | top: 14px; 123 | margin-top: 0; } 124 | .ladda-button[data-style=expand-up][data-loading][data-size="s"], .ladda-button[data-style=expand-up][data-loading][data-size="xs"] { 125 | padding-top: 32px; } 126 | .ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-up][data-loading][data-size="xs"] .ladda-spinner { 127 | top: 4px; } 128 | 129 | /************************************* 130 | * EXPAND DOWN 131 | */ 132 | .ladda-button[data-style=expand-down] { 133 | overflow: hidden; } 134 | .ladda-button[data-style=expand-down] .ladda-spinner { 135 | top: 62px; 136 | left: 50%; 137 | margin-left: -16px; } 138 | .ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-down][data-size="xs"] .ladda-spinner { 139 | top: 40px; } 140 | .ladda-button[data-style=expand-down][data-loading] { 141 | padding-bottom: 54px; } 142 | .ladda-button[data-style=expand-down][data-loading] .ladda-spinner { 143 | opacity: 1; } 144 | .ladda-button[data-style=expand-down][data-loading][data-size="s"], .ladda-button[data-style=expand-down][data-loading][data-size="xs"] { 145 | padding-bottom: 32px; } 146 | 147 | /************************************* 148 | * SLIDE LEFT 149 | */ 150 | .ladda-button[data-style=slide-left] { 151 | overflow: hidden; } 152 | .ladda-button[data-style=slide-left] .ladda-label { 153 | position: relative; } 154 | .ladda-button[data-style=slide-left] .ladda-spinner { 155 | left: 100%; 156 | margin-left: -16px; } 157 | .ladda-button[data-style=slide-left][data-loading] .ladda-label { 158 | opacity: 0; 159 | left: -100%; } 160 | .ladda-button[data-style=slide-left][data-loading] .ladda-spinner { 161 | opacity: 1; 162 | left: 50%; } 163 | 164 | /************************************* 165 | * SLIDE RIGHT 166 | */ 167 | .ladda-button[data-style=slide-right] { 168 | overflow: hidden; } 169 | .ladda-button[data-style=slide-right] .ladda-label { 170 | position: relative; } 171 | .ladda-button[data-style=slide-right] .ladda-spinner { 172 | right: 100%; 173 | margin-left: -16px; } 174 | .ladda-button[data-style=slide-right][data-loading] .ladda-label { 175 | opacity: 0; 176 | left: 100%; } 177 | .ladda-button[data-style=slide-right][data-loading] .ladda-spinner { 178 | opacity: 1; 179 | left: 50%; } 180 | 181 | /************************************* 182 | * SLIDE UP 183 | */ 184 | .ladda-button[data-style=slide-up] { 185 | overflow: hidden; } 186 | .ladda-button[data-style=slide-up] .ladda-label { 187 | position: relative; } 188 | .ladda-button[data-style=slide-up] .ladda-spinner { 189 | left: 50%; 190 | margin-left: -16px; 191 | margin-top: 1em; } 192 | .ladda-button[data-style=slide-up][data-loading] .ladda-label { 193 | opacity: 0; 194 | top: -1em; } 195 | .ladda-button[data-style=slide-up][data-loading] .ladda-spinner { 196 | opacity: 1; 197 | margin-top: -16px; } 198 | 199 | /************************************* 200 | * SLIDE DOWN 201 | */ 202 | .ladda-button[data-style=slide-down] { 203 | overflow: hidden; } 204 | .ladda-button[data-style=slide-down] .ladda-label { 205 | position: relative; } 206 | .ladda-button[data-style=slide-down] .ladda-spinner { 207 | left: 50%; 208 | margin-left: -16px; 209 | margin-top: -2em; } 210 | .ladda-button[data-style=slide-down][data-loading] .ladda-label { 211 | opacity: 0; 212 | top: 1em; } 213 | .ladda-button[data-style=slide-down][data-loading] .ladda-spinner { 214 | opacity: 1; 215 | margin-top: -16px; } 216 | 217 | /************************************* 218 | * ZOOM-OUT 219 | */ 220 | .ladda-button[data-style=zoom-out] { 221 | overflow: hidden; } 222 | 223 | .ladda-button[data-style=zoom-out] .ladda-spinner { 224 | left: 50%; 225 | margin-left: -16px; 226 | -webkit-transform: scale(2.5); 227 | -moz-transform: scale(2.5); 228 | -ms-transform: scale(2.5); 229 | -o-transform: scale(2.5); 230 | transform: scale(2.5); } 231 | 232 | .ladda-button[data-style=zoom-out] .ladda-label { 233 | position: relative; 234 | display: inline-block; } 235 | 236 | .ladda-button[data-style=zoom-out][data-loading] .ladda-label { 237 | opacity: 0; 238 | -webkit-transform: scale(0.5); 239 | -moz-transform: scale(0.5); 240 | -ms-transform: scale(0.5); 241 | -o-transform: scale(0.5); 242 | transform: scale(0.5); } 243 | 244 | .ladda-button[data-style=zoom-out][data-loading] .ladda-spinner { 245 | opacity: 1; 246 | -webkit-transform: none; 247 | -moz-transform: none; 248 | -ms-transform: none; 249 | -o-transform: none; 250 | transform: none; } 251 | 252 | /************************************* 253 | * ZOOM-IN 254 | */ 255 | .ladda-button[data-style=zoom-in] { 256 | overflow: hidden; } 257 | 258 | .ladda-button[data-style=zoom-in] .ladda-spinner { 259 | left: 50%; 260 | margin-left: -16px; 261 | -webkit-transform: scale(0.2); 262 | -moz-transform: scale(0.2); 263 | -ms-transform: scale(0.2); 264 | -o-transform: scale(0.2); 265 | transform: scale(0.2); } 266 | 267 | .ladda-button[data-style=zoom-in] .ladda-label { 268 | position: relative; 269 | display: inline-block; } 270 | 271 | .ladda-button[data-style=zoom-in][data-loading] .ladda-label { 272 | opacity: 0; 273 | -webkit-transform: scale(2.2); 274 | -moz-transform: scale(2.2); 275 | -ms-transform: scale(2.2); 276 | -o-transform: scale(2.2); 277 | transform: scale(2.2); } 278 | 279 | .ladda-button[data-style=zoom-in][data-loading] .ladda-spinner { 280 | opacity: 1; 281 | -webkit-transform: none; 282 | -moz-transform: none; 283 | -ms-transform: none; 284 | -o-transform: none; 285 | transform: none; } 286 | 287 | /************************************* 288 | * CONTRACT 289 | */ 290 | .ladda-button[data-style=contract] { 291 | overflow: hidden; 292 | width: 100px; } 293 | 294 | .ladda-button[data-style=contract] .ladda-spinner { 295 | left: 50%; 296 | margin-left: -16px; } 297 | 298 | .ladda-button[data-style=contract][data-loading] { 299 | border-radius: 50%; 300 | width: 52px; } 301 | 302 | .ladda-button[data-style=contract][data-loading] .ladda-label { 303 | opacity: 0; } 304 | 305 | .ladda-button[data-style=contract][data-loading] .ladda-spinner { 306 | opacity: 1; } 307 | 308 | /************************************* 309 | * OVERLAY 310 | */ 311 | .ladda-button[data-style=contract-overlay] { 312 | overflow: hidden; 313 | width: 100px; 314 | box-shadow: 0px 0px 0px 3000px transparent; } 315 | 316 | .ladda-button[data-style=contract-overlay] .ladda-spinner { 317 | left: 50%; 318 | margin-left: -16px; } 319 | 320 | .ladda-button[data-style=contract-overlay][data-loading] { 321 | border-radius: 50%; 322 | width: 52px; 323 | /*outline: 10000px solid rgba( 0, 0, 0, 0.5 );*/ 324 | box-shadow: 0px 0px 0px 3000px rgba(0, 0, 0, 0.8); } 325 | 326 | .ladda-button[data-style=contract-overlay][data-loading] .ladda-label { 327 | opacity: 0; } 328 | 329 | .ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner { 330 | opacity: 1; } 331 | -------------------------------------------------------------------------------- /js/spin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2011-2014 Felix Gnass 3 | * Licensed under the MIT license 4 | */ 5 | (function(root, factory) { 6 | 7 | /* CommonJS */ 8 | if (typeof exports == 'object') module.exports = factory() 9 | 10 | /* AMD module */ 11 | else if (typeof define == 'function' && define.amd) define(factory) 12 | 13 | /* Browser global */ 14 | else root.Spinner = factory() 15 | } 16 | (this, function() { 17 | "use strict"; 18 | 19 | var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */ 20 | , animations = {} /* Animation rules keyed by their name */ 21 | , useCssAnimations /* Whether to use CSS animations or setTimeout */ 22 | 23 | /** 24 | * Utility function to create elements. If no tag name is given, 25 | * a DIV is created. Optionally properties can be passed. 26 | */ 27 | function createEl(tag, prop) { 28 | var el = document.createElement(tag || 'div') 29 | , n 30 | 31 | for(n in prop) el[n] = prop[n] 32 | return el 33 | } 34 | 35 | /** 36 | * Appends children and returns the parent. 37 | */ 38 | function ins(parent /* child1, child2, ...*/) { 39 | for (var i=1, n=arguments.length; i>1) + 'px' 250 | }) 251 | } 252 | 253 | for (; i < o.lines; i++) { 254 | seg = css(createEl(), { 255 | position: 'absolute', 256 | top: 1+~(o.width/2) + 'px', 257 | transform: o.hwaccel ? 'translate3d(0,0,0)' : '', 258 | opacity: o.opacity, 259 | animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1/o.speed + 's linear infinite' 260 | }) 261 | 262 | if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'})) 263 | ins(el, ins(seg, fill(getColor(o.color, i), '0 0 1px rgba(0,0,0,.1)'))) 264 | } 265 | return el 266 | }, 267 | 268 | /** 269 | * Internal method that adjusts the opacity of a single line. 270 | * Will be overwritten in VML fallback mode below. 271 | */ 272 | opacity: function(el, i, val) { 273 | if (i < el.childNodes.length) el.childNodes[i].style.opacity = val 274 | } 275 | 276 | }) 277 | 278 | 279 | function initVML() { 280 | 281 | /* Utility function to create a VML tag */ 282 | function vml(tag, attr) { 283 | return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr) 284 | } 285 | 286 | // No CSS transforms but VML support, add a CSS rule for VML elements: 287 | sheet.addRule('.spin-vml', 'behavior:url(#default#VML)') 288 | 289 | Spinner.prototype.lines = function(el, o) { 290 | var r = o.length+o.width 291 | , s = 2*r 292 | 293 | function grp() { 294 | return css( 295 | vml('group', { 296 | coordsize: s + ' ' + s, 297 | coordorigin: -r + ' ' + -r 298 | }), 299 | { width: s, height: s } 300 | ) 301 | } 302 | 303 | var margin = -(o.width+o.length)*2 + 'px' 304 | , g = css(grp(), {position: 'absolute', top: margin, left: margin}) 305 | , i 306 | 307 | function seg(i, dx, filter) { 308 | ins(g, 309 | ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}), 310 | ins(css(vml('roundrect', {arcsize: o.corners}), { 311 | width: r, 312 | height: o.width, 313 | left: o.radius, 314 | top: -o.width>>1, 315 | filter: filter 316 | }), 317 | vml('fill', {color: getColor(o.color, i), opacity: o.opacity}), 318 | vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change 319 | ) 320 | ) 321 | ) 322 | } 323 | 324 | if (o.shadow) 325 | for (i = 1; i <= o.lines; i++) 326 | seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)') 327 | 328 | for (i = 1; i <= o.lines; i++) seg(i) 329 | return ins(el, g) 330 | } 331 | 332 | Spinner.prototype.opacity = function(el, i, val, o) { 333 | var c = el.firstChild 334 | o = o.shadow && o.lines || 0 335 | if (c && i+o < c.childNodes.length) { 336 | c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild 337 | if (c) c.opacity = val 338 | } 339 | } 340 | } 341 | 342 | var probe = css(createEl('group'), {behavior: 'url(#default#VML)'}) 343 | 344 | if (!vendor(probe, 'transform') && probe.adj) initVML() 345 | else useCssAnimations = vendor(probe, 'animation') 346 | 347 | return Spinner 348 | 349 | })); 350 | -------------------------------------------------------------------------------- /dist/ladda.css: -------------------------------------------------------------------------------- 1 | /** Contains the default Ladda button theme styles */ 2 | /*! 3 | * Ladda 4 | * http://lab.hakim.se/ladda 5 | * MIT licensed 6 | * 7 | * Copyright (C) 2013 Hakim El Hattab, http://hakim.se 8 | */ 9 | /************************************* 10 | * CONFIG 11 | */ 12 | /************************************* 13 | * MIXINS 14 | */ 15 | /************************************* 16 | * BUTTON BASE 17 | */ 18 | .ladda-button { 19 | position: relative; } 20 | 21 | /* Spinner animation */ 22 | .ladda-button .ladda-spinner { 23 | position: absolute; 24 | z-index: 2; 25 | display: inline-block; 26 | width: 32px; 27 | height: 32px; 28 | top: 50%; 29 | margin-top: -16px; 30 | opacity: 0; 31 | pointer-events: none; } 32 | 33 | /* Button label */ 34 | .ladda-button .ladda-label { 35 | position: relative; 36 | z-index: 3; } 37 | 38 | /* Progress bar */ 39 | .ladda-button .ladda-progress { 40 | position: absolute; 41 | width: 0; 42 | height: 100%; 43 | left: 0; 44 | top: 0; 45 | background: rgba(0, 0, 0, 0.2); 46 | visibility: hidden; 47 | opacity: 0; 48 | -webkit-transition: 0.1s linear all !important; 49 | -moz-transition: 0.1s linear all !important; 50 | -ms-transition: 0.1s linear all !important; 51 | -o-transition: 0.1s linear all !important; 52 | transition: 0.1s linear all !important; } 53 | 54 | .ladda-button[data-loading] .ladda-progress { 55 | opacity: 1; 56 | visibility: visible; } 57 | 58 | /************************************* 59 | * EASING 60 | */ 61 | .ladda-button, 62 | .ladda-button .ladda-spinner, 63 | .ladda-button .ladda-label { 64 | -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; 65 | -moz-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; 66 | -ms-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; 67 | -o-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; 68 | transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; } 69 | 70 | .ladda-button[data-style=zoom-in], 71 | .ladda-button[data-style=zoom-in] .ladda-spinner, 72 | .ladda-button[data-style=zoom-in] .ladda-label, 73 | .ladda-button[data-style=zoom-out], 74 | .ladda-button[data-style=zoom-out] .ladda-spinner, 75 | .ladda-button[data-style=zoom-out] .ladda-label { 76 | -webkit-transition: 0.3s ease all !important; 77 | -moz-transition: 0.3s ease all !important; 78 | -ms-transition: 0.3s ease all !important; 79 | -o-transition: 0.3s ease all !important; 80 | transition: 0.3s ease all !important; } 81 | 82 | /************************************* 83 | * EXPAND LEFT 84 | */ 85 | .ladda-button[data-style=expand-right] .ladda-spinner { 86 | right: 14px; } 87 | .ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-right][data-size="xs"] .ladda-spinner { 88 | right: 4px; } 89 | .ladda-button[data-style=expand-right][data-loading] { 90 | padding-right: 56px; } 91 | .ladda-button[data-style=expand-right][data-loading] .ladda-spinner { 92 | opacity: 1; } 93 | .ladda-button[data-style=expand-right][data-loading][data-size="s"], .ladda-button[data-style=expand-right][data-loading][data-size="xs"] { 94 | padding-right: 40px; } 95 | 96 | /************************************* 97 | * EXPAND RIGHT 98 | */ 99 | .ladda-button[data-style=expand-left] .ladda-spinner { 100 | left: 14px; } 101 | .ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-left][data-size="xs"] .ladda-spinner { 102 | left: 4px; } 103 | .ladda-button[data-style=expand-left][data-loading] { 104 | padding-left: 56px; } 105 | .ladda-button[data-style=expand-left][data-loading] .ladda-spinner { 106 | opacity: 1; } 107 | .ladda-button[data-style=expand-left][data-loading][data-size="s"], .ladda-button[data-style=expand-left][data-loading][data-size="xs"] { 108 | padding-left: 40px; } 109 | 110 | /************************************* 111 | * EXPAND UP 112 | */ 113 | .ladda-button[data-style=expand-up] { 114 | overflow: hidden; } 115 | .ladda-button[data-style=expand-up] .ladda-spinner { 116 | top: -32px; 117 | left: 50%; 118 | margin-left: -16px; } 119 | .ladda-button[data-style=expand-up][data-loading] { 120 | padding-top: 54px; } 121 | .ladda-button[data-style=expand-up][data-loading] .ladda-spinner { 122 | opacity: 1; 123 | top: 14px; 124 | margin-top: 0; } 125 | .ladda-button[data-style=expand-up][data-loading][data-size="s"], .ladda-button[data-style=expand-up][data-loading][data-size="xs"] { 126 | padding-top: 32px; } 127 | .ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-up][data-loading][data-size="xs"] .ladda-spinner { 128 | top: 4px; } 129 | 130 | /************************************* 131 | * EXPAND DOWN 132 | */ 133 | .ladda-button[data-style=expand-down] { 134 | overflow: hidden; } 135 | .ladda-button[data-style=expand-down] .ladda-spinner { 136 | top: 62px; 137 | left: 50%; 138 | margin-left: -16px; } 139 | .ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-down][data-size="xs"] .ladda-spinner { 140 | top: 40px; } 141 | .ladda-button[data-style=expand-down][data-loading] { 142 | padding-bottom: 54px; } 143 | .ladda-button[data-style=expand-down][data-loading] .ladda-spinner { 144 | opacity: 1; } 145 | .ladda-button[data-style=expand-down][data-loading][data-size="s"], .ladda-button[data-style=expand-down][data-loading][data-size="xs"] { 146 | padding-bottom: 32px; } 147 | 148 | /************************************* 149 | * SLIDE LEFT 150 | */ 151 | .ladda-button[data-style=slide-left] { 152 | overflow: hidden; } 153 | .ladda-button[data-style=slide-left] .ladda-label { 154 | position: relative; } 155 | .ladda-button[data-style=slide-left] .ladda-spinner { 156 | left: 100%; 157 | margin-left: -16px; } 158 | .ladda-button[data-style=slide-left][data-loading] .ladda-label { 159 | opacity: 0; 160 | left: -100%; } 161 | .ladda-button[data-style=slide-left][data-loading] .ladda-spinner { 162 | opacity: 1; 163 | left: 50%; } 164 | 165 | /************************************* 166 | * SLIDE RIGHT 167 | */ 168 | .ladda-button[data-style=slide-right] { 169 | overflow: hidden; } 170 | .ladda-button[data-style=slide-right] .ladda-label { 171 | position: relative; } 172 | .ladda-button[data-style=slide-right] .ladda-spinner { 173 | right: 100%; 174 | margin-left: -16px; } 175 | .ladda-button[data-style=slide-right][data-loading] .ladda-label { 176 | opacity: 0; 177 | left: 100%; } 178 | .ladda-button[data-style=slide-right][data-loading] .ladda-spinner { 179 | opacity: 1; 180 | left: 50%; } 181 | 182 | /************************************* 183 | * SLIDE UP 184 | */ 185 | .ladda-button[data-style=slide-up] { 186 | overflow: hidden; } 187 | .ladda-button[data-style=slide-up] .ladda-label { 188 | position: relative; } 189 | .ladda-button[data-style=slide-up] .ladda-spinner { 190 | left: 50%; 191 | margin-left: -16px; 192 | margin-top: 1em; } 193 | .ladda-button[data-style=slide-up][data-loading] .ladda-label { 194 | opacity: 0; 195 | top: -1em; } 196 | .ladda-button[data-style=slide-up][data-loading] .ladda-spinner { 197 | opacity: 1; 198 | margin-top: -16px; } 199 | 200 | /************************************* 201 | * SLIDE DOWN 202 | */ 203 | .ladda-button[data-style=slide-down] { 204 | overflow: hidden; } 205 | .ladda-button[data-style=slide-down] .ladda-label { 206 | position: relative; } 207 | .ladda-button[data-style=slide-down] .ladda-spinner { 208 | left: 50%; 209 | margin-left: -16px; 210 | margin-top: -2em; } 211 | .ladda-button[data-style=slide-down][data-loading] .ladda-label { 212 | opacity: 0; 213 | top: 1em; } 214 | .ladda-button[data-style=slide-down][data-loading] .ladda-spinner { 215 | opacity: 1; 216 | margin-top: -16px; } 217 | 218 | /************************************* 219 | * ZOOM-OUT 220 | */ 221 | .ladda-button[data-style=zoom-out] { 222 | overflow: hidden; } 223 | 224 | .ladda-button[data-style=zoom-out] .ladda-spinner { 225 | left: 50%; 226 | margin-left: -16px; 227 | -webkit-transform: scale(2.5); 228 | -moz-transform: scale(2.5); 229 | -ms-transform: scale(2.5); 230 | -o-transform: scale(2.5); 231 | transform: scale(2.5); } 232 | 233 | .ladda-button[data-style=zoom-out] .ladda-label { 234 | position: relative; 235 | display: inline-block; } 236 | 237 | .ladda-button[data-style=zoom-out][data-loading] .ladda-label { 238 | opacity: 0; 239 | -webkit-transform: scale(0.5); 240 | -moz-transform: scale(0.5); 241 | -ms-transform: scale(0.5); 242 | -o-transform: scale(0.5); 243 | transform: scale(0.5); } 244 | 245 | .ladda-button[data-style=zoom-out][data-loading] .ladda-spinner { 246 | opacity: 1; 247 | -webkit-transform: none; 248 | -moz-transform: none; 249 | -ms-transform: none; 250 | -o-transform: none; 251 | transform: none; } 252 | 253 | /************************************* 254 | * ZOOM-IN 255 | */ 256 | .ladda-button[data-style=zoom-in] { 257 | overflow: hidden; } 258 | 259 | .ladda-button[data-style=zoom-in] .ladda-spinner { 260 | left: 50%; 261 | margin-left: -16px; 262 | -webkit-transform: scale(0.2); 263 | -moz-transform: scale(0.2); 264 | -ms-transform: scale(0.2); 265 | -o-transform: scale(0.2); 266 | transform: scale(0.2); } 267 | 268 | .ladda-button[data-style=zoom-in] .ladda-label { 269 | position: relative; 270 | display: inline-block; } 271 | 272 | .ladda-button[data-style=zoom-in][data-loading] .ladda-label { 273 | opacity: 0; 274 | -webkit-transform: scale(2.2); 275 | -moz-transform: scale(2.2); 276 | -ms-transform: scale(2.2); 277 | -o-transform: scale(2.2); 278 | transform: scale(2.2); } 279 | 280 | .ladda-button[data-style=zoom-in][data-loading] .ladda-spinner { 281 | opacity: 1; 282 | -webkit-transform: none; 283 | -moz-transform: none; 284 | -ms-transform: none; 285 | -o-transform: none; 286 | transform: none; } 287 | 288 | /************************************* 289 | * CONTRACT 290 | */ 291 | .ladda-button[data-style=contract] { 292 | overflow: hidden; 293 | width: 100px; } 294 | 295 | .ladda-button[data-style=contract] .ladda-spinner { 296 | left: 50%; 297 | margin-left: -16px; } 298 | 299 | .ladda-button[data-style=contract][data-loading] { 300 | border-radius: 50%; 301 | width: 52px; } 302 | 303 | .ladda-button[data-style=contract][data-loading] .ladda-label { 304 | opacity: 0; } 305 | 306 | .ladda-button[data-style=contract][data-loading] .ladda-spinner { 307 | opacity: 1; } 308 | 309 | /************************************* 310 | * OVERLAY 311 | */ 312 | .ladda-button[data-style=contract-overlay] { 313 | overflow: hidden; 314 | width: 100px; 315 | box-shadow: 0px 0px 0px 3000px transparent; } 316 | 317 | .ladda-button[data-style=contract-overlay] .ladda-spinner { 318 | left: 50%; 319 | margin-left: -16px; } 320 | 321 | .ladda-button[data-style=contract-overlay][data-loading] { 322 | border-radius: 50%; 323 | width: 52px; 324 | /*outline: 10000px solid rgba( 0, 0, 0, 0.5 );*/ 325 | box-shadow: 0px 0px 0px 3000px rgba(0, 0, 0, 0.8); } 326 | 327 | .ladda-button[data-style=contract-overlay][data-loading] .ladda-label { 328 | opacity: 0; } 329 | 330 | .ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner { 331 | opacity: 1; } 332 | 333 | /************************************* 334 | * CONFIG 335 | */ 336 | /************************************* 337 | * BUTTON THEME 338 | */ 339 | .ladda-button { 340 | background: #666; 341 | border: 0; 342 | padding: 14px 18px; 343 | font-size: 18px; 344 | cursor: pointer; 345 | color: #fff; 346 | border-radius: 2px; 347 | border: 1px solid transparent; 348 | -webkit-appearance: none; 349 | -webkit-font-smoothing: antialiased; 350 | -webkit-tap-highlight-color: transparent; } 351 | .ladda-button:hover { 352 | border-color: rgba(0, 0, 0, 0.07); 353 | background-color: #888; } 354 | .ladda-button[data-color=green] { 355 | background: #2aca76; } 356 | .ladda-button[data-color=green]:hover { 357 | background-color: #38d683; } 358 | .ladda-button[data-color=blue] { 359 | background: #53b5e6; } 360 | .ladda-button[data-color=blue]:hover { 361 | background-color: #69bfe9; } 362 | .ladda-button[data-color=red] { 363 | background: #ea8557; } 364 | .ladda-button[data-color=red]:hover { 365 | background-color: #ed956e; } 366 | .ladda-button[data-color=purple] { 367 | background: #9973c2; } 368 | .ladda-button[data-color=purple]:hover { 369 | background-color: #a685ca; } 370 | .ladda-button[data-color=mint] { 371 | background: #16a085; } 372 | .ladda-button[data-color=mint]:hover { 373 | background-color: #19b698; } 374 | .ladda-button[disabled], .ladda-button[data-loading] { 375 | border-color: rgba(0, 0, 0, 0.07); 376 | cursor: default; 377 | background-color: #999; } 378 | .ladda-button[disabled]:hover, .ladda-button[data-loading]:hover { 379 | cursor: default; 380 | background-color: #999; } 381 | .ladda-button[data-size=xs] { 382 | padding: 4px 8px; } 383 | .ladda-button[data-size=xs] .ladda-label { 384 | font-size: 0.7em; } 385 | .ladda-button[data-size=s] { 386 | padding: 6px 10px; } 387 | .ladda-button[data-size=s] .ladda-label { 388 | font-size: 0.9em; } 389 | .ladda-button[data-size=l] .ladda-label { 390 | font-size: 1.2em; } 391 | .ladda-button[data-size=xl] .ladda-label { 392 | font-size: 1.5em; } 393 | --------------------------------------------------------------------------------