[
  {
    "path": ".gitattributes",
    "content": "# so website files won't cause project language to be shown as HTML\nsite/* linguist-documentation\n"
  },
  {
    "path": ".gitignore",
    "content": "/node_modules/\n/dist/\n/site/dist/\n"
  },
  {
    "path": ".npmrc",
    "content": "package-lock=false\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Changelog\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),\nand this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).\n\n## [Unreleased]\n\n## [2.0.3] - 2021-12-02\n### Fixed\n- Deprecated slash as division when using Dart Sass (issue [#109])\n\n## [2.0.2] - 2021-09-01\n### Changed\n- Set package type to `module` to better support native ES module imports\n- Code cleanup and documentation improvements\n\n## [2.0.1] - 2018-05-14\n### Added\n- Support for reassigning `$spinnerSize` Sass variable (PR [#81])\n- Re-included Sass files in the npm package\n\n## [2.0.0] - 2018-05-13\n### Added\n- Built-in TypeScript definitions\n- Support for the `style-src 'self';` Content Security Policy\n\n### Changed\n- Rewritten as a native ES6 module using spin.js v4\n\n### Removed\n- Deprecated jQuery API\n- Deprecated `enable` and `disable` methods\n- Bower support\n- Support for Internet Explorer 9 (not supported by spin.js v4)\n\n## [1.0.6] - 2018-02-04\n### Added\n- Support for forms with `novalidate` attribute (issue [#80])\n\n### Fixed\n- Protruding outline in Chrome on buttons with a progress bar\n\n## [1.0.5] - 2017-09-24\n### Added\n- Validation for URL input fields in IE 9\n\n### Fixed\n- Detection of required HTML5 inputs in IE 9\n- Bug where the `stop()` method would remove a button's disabled state even though Ladda was already stopped (issue [#68])\n\n## [1.0.4] - 2017-08-27\n### Fixed\n- Incorrect return value for jQuery `isLoading` argument (PR [#62], issue [#65])\n\nNote that the Ladda jQuery API is deprecated - it is recommended to use the plain JavaScript API instead.\n\n## [1.0.3] - 2017-08-27\n### Changed\n- Code cleanup and performance improvements\n\n### Deprecated\n- Undocumented `enable` and `disable` instance methods\n\n## [1.0.2] - 2017-08-27\n### Added\n- Support for right-to-left text direction (PR [#66])\n\n### Deprecated\n- jQuery API\n\n## [1.0.1] - 2017-07-11\n### Fixed\n- Bug where focus outline protruded outside button in Chrome\n\n### Removed\n- Unnecessary `toArray()` function\n\n## [1.0.0] - 2016-03-08\n### Added\n- `data-spinner-lines` attribute for controlling the number of lines in the spinner (PR [#50])\n\n### Changed\n- The `ladda-button` class and `data-style` attribute are now automatically set if missing (PR [#52])\n- `ladda-label` now wraps existing elements instead of reinserting them using `innerHTML` (PR [#55])\n- `checkValidity` is now used to validate forms where supported (PR [#58])\n\n## [0.9.8] - 2015-04-05\n### Added\n- `main` field to package.json for easier CommonJS loading (PR [#47])\n- Validity check for email inputs (PR [#48])\n\n### Changed\n- Updated spin.js to v2.0.2 (PR [#49])\n\n## [0.9.7] - 2015-01-17\n### Fixed\n- The Ladda theme is now baked into the output ladda.min.css file again. Was broken after upgrading grunt Sass in v0.9.5.\n\n## [0.9.6] - 2015-01-16\n### Removed\n- Unintended references to non-existing sourcemap files that were introduced in v0.9.5 as part of the grunt Sass upgrade.\n\n## [0.9.5] - 2015-01-16\n### Fixed\n- Validation of required select, radio, and checkbox inputs (PR [#43])\n- The `ladda-spinner` element is no longer created if it already exists (PR [#44])\n\n## [0.9.4] - 2014-06-21\n### Added\n- `remove()` method to Ladda instances to stop memory leaks (PR [#36])\n\n### Changed\n- Updated from spin.js v1.3 to v2.0 (PR [#37])\n\n## [0.9.3] - 2014-04-16\n### Added\n- jQuery wrapper (PR [#33])\n\n### Fixed\n- Overlay effect in Safari\n- Missing CommonJS requirement\n\n## [0.9.2] - 2013-12-03\n### Fixed\n- Spinner height is now calculated when spinning starts as opposed to when Ladda is initialized. This fixes spinner sizing issues with buttons that are initially hidden.\n\n## [0.9.1] - 2013-11-27\n### Fixed\n- Issue where loading animations did not start for buttons outside of forms. This only affected use through the `Ladda.bind()` method.\n\n## [0.9.0] - 2013-10-23\n### Changed\n- Ladda now confirms that all `required` fields in its parent form are filled out before starting the spinning animation. Note that this only applies to buttons bound using `Ladda.bind()`.\n\n### Removed\n- jQuery dependencies\n\n## [0.8.0] - 2013-09-05\n### Added\n- `data-spinner-color` attribute for configuring spinner color\n\n### Changed\n- Disabled pointer events on spinner element\n\n### Fixed\n- Array conversion bug which prevented binding Ladda to a selector\n- Default `z-index` value, was `initial` but should be `auto`\n\n## [0.7.0] - 2013-07-19\n### Added\n- `startAfter(delay)` method\n\n### Changed\n- Limit progress value to number between `0` and `1`\n\n### Fixed\n- Issue that prevented forms from submitting\n- Error that caused IE 8 to blow up on page load (still not supported, though)\n\n## [0.6.0] - 2013-07-07\n### Added\n- `data-spinner-size` attribute for setting explicit pixel size of spinner\n\n### Changed\n- `ladda-label` wrapper is now automatically created if it doesn't exist\n\n## [0.5.2] - 2013-06-27\n### Added\n- bower.json\n\n### Fixed\n- Error when passing element to `Ladda.create()`\n\n## [0.5.1] - 2013-06-19\n### Added\n- Bootstrap integration example\n\n## [0.5.0] - 2013-06-19\n### Changed\n- Split visual and functional styles into separate stylesheets for framework compatibility (issue [#20])\n- Spinner size is now automatically calculated using JavaScript\n\n## [0.4.2] - 2013-06-14\n### Added\n- Size options (issue [#15])\n- Mint color preset\n\n### Changed\n- All settings are now applied via `data-*` attributes\n\n## [0.4.1] - 2013-06-14\n### Added\n- `enable` and `disable` helper methods\n\n## [0.4.0] - 2013-06-14\n### Added\n- Common.js / AMD module support\n- Grunt build file and minified files in /dist folder\n\n### Changed\n- Migrated from plain CSS to Sass\n\n## [0.3.0] - 2013-06-08\n### Added\n- Built-in progress bars which can be controlled using `setProgress` method\n\n### Changed\n- Replaced spinner GIF with spin.js\n- `spinner` and `label` classes are now prefixed with `ladda-`\n\n### Removed\n- Hardcoded timeout\n\n## [0.2.0] - 2013-06-05\n### Added\n- Simple JavaScript API\n- Instructions in readme\n- MIT license\n\n## [0.1.0] - 2013-06-05\n- Initial release\n\n[Unreleased]: https://github.com/hakimel/Ladda/compare/2.0.3...HEAD\n[2.0.3]: https://github.com/hakimel/Ladda/compare/2.0.2...2.0.3\n[2.0.2]: https://github.com/hakimel/Ladda/compare/2.0.1...2.0.2\n[2.0.1]: https://github.com/hakimel/Ladda/compare/2.0.0...2.0.1\n[2.0.0]: https://github.com/hakimel/Ladda/compare/1.0.6...2.0.0\n[1.0.6]: https://github.com/hakimel/Ladda/compare/1.0.5...1.0.6\n[1.0.5]: https://github.com/hakimel/Ladda/compare/1.0.4...1.0.5\n[1.0.4]: https://github.com/hakimel/Ladda/compare/1.0.3...1.0.4\n[1.0.3]: https://github.com/hakimel/Ladda/compare/1.0.2...1.0.3\n[1.0.2]: https://github.com/hakimel/Ladda/compare/1.0.1...1.0.2\n[1.0.1]: https://github.com/hakimel/Ladda/compare/1.0.0...1.0.1\n[1.0.0]: https://github.com/hakimel/Ladda/compare/0.9.8...1.0.0\n[0.9.8]: https://github.com/hakimel/Ladda/compare/0.9.7...0.9.8\n[0.9.7]: https://github.com/hakimel/Ladda/compare/0.9.6...0.9.7\n[0.9.6]: https://github.com/hakimel/Ladda/compare/0.9.5...0.9.6\n[0.9.5]: https://github.com/hakimel/Ladda/compare/0.9.4...0.9.5\n[0.9.4]: https://github.com/hakimel/Ladda/compare/0.9.3...0.9.4\n[0.9.3]: https://github.com/hakimel/Ladda/compare/0.9.2...0.9.3\n[0.9.2]: https://github.com/hakimel/Ladda/compare/0.9.1...0.9.2\n[0.9.1]: https://github.com/hakimel/Ladda/compare/0.9.0...0.9.1\n[0.9.0]: https://github.com/hakimel/Ladda/compare/0.8.0...0.9.0\n[0.8.0]: https://github.com/hakimel/Ladda/compare/0.7.0...0.8.0\n[0.7.0]: https://github.com/hakimel/Ladda/compare/0.6.0...0.7.0\n[0.6.0]: https://github.com/hakimel/Ladda/compare/0.5.2...0.6.0\n[0.5.2]: https://github.com/hakimel/Ladda/compare/0.5.1...0.5.2\n[0.5.1]: https://github.com/hakimel/Ladda/compare/0.5.0...0.5.1\n[0.5.0]: https://github.com/hakimel/Ladda/compare/0.4.2...0.5.0\n[0.4.2]: https://github.com/hakimel/Ladda/compare/0.4.1...0.4.2\n[0.4.1]: https://github.com/hakimel/Ladda/compare/0.4.0...0.4.1\n[0.4.0]: https://github.com/hakimel/Ladda/compare/0.3.0...0.4.0\n[0.3.0]: https://github.com/hakimel/Ladda/compare/0.2.0...0.3.0\n[0.2.0]: https://github.com/hakimel/Ladda/compare/0.1.0...0.2.0\n[0.1.0]: https://github.com/hakimel/Ladda/tree/0.1.0\n\n[#109]: https://github.com/hakimel/Ladda/issues/109\n[#81]: https://github.com/hakimel/Ladda/pull/81\n[#80]: https://github.com/hakimel/Ladda/issues/80\n[#68]: https://github.com/hakimel/Ladda/issues/68\n[#66]: https://github.com/hakimel/Ladda/pull/66\n[#65]: https://github.com/hakimel/Ladda/issues/65\n[#62]: https://github.com/hakimel/Ladda/pull/62\n[#58]: https://github.com/hakimel/Ladda/pull/58\n[#55]: https://github.com/hakimel/Ladda/pull/55\n[#52]: https://github.com/hakimel/Ladda/pull/52\n[#50]: https://github.com/hakimel/Ladda/pull/50\n[#49]: https://github.com/hakimel/Ladda/pull/49\n[#48]: https://github.com/hakimel/Ladda/pull/48\n[#47]: https://github.com/hakimel/Ladda/pull/47\n[#44]: https://github.com/hakimel/Ladda/pull/44\n[#43]: https://github.com/hakimel/Ladda/pull/43\n[#37]: https://github.com/hakimel/Ladda/pull/37\n[#36]: https://github.com/hakimel/Ladda/pull/36\n[#33]: https://github.com/hakimel/Ladda/pull/33\n[#20]: https://github.com/hakimel/Ladda/issues/20\n[#15]: https://github.com/hakimel/Ladda/issues/15\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing\n\nClone the repository and run `npm install` to install development dependencies and compile the project.\nThen run `npm start` to watch files for changes and start a static file server for viewing the test site.\nOpen http://localhost:8000/ in your browser to view the site.\n"
  },
  {
    "path": "Gruntfile.cjs",
    "content": "const sass = require('sass');\n\nmodule.exports = function (grunt) {\n\t'use strict';\n\n\t// Project configuration\n\tgrunt.initConfig({\n\t\tsass: {\n\t\t\toptions: {\n\t\t\t\timplementation: sass,\n\t\t\t\toutputStyle: 'compressed',\n\t\t\t},\n\t\t\tdist: {\n\t\t\t\tfiles: {\n\t\t\t\t\t'dist/ladda.min.css': 'css/ladda-themed.scss',\n\t\t\t\t\t'dist/ladda-themeless.min.css': 'css/ladda.scss'\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tjshint: {\n\t\t\toptions: {\n\t\t\t\t// enforcing\n\t\t\t\tesversion: 6,\n\t\t\t\tcurly: true,\n\t\t\t\teqeqeq: true,\n\t\t\t\tfreeze: true,\n\t\t\t\tfuturehostile: true,\n\t\t\t\tglobals: {\n\t\t\t\t\tmodule: false,\n\t\t\t\t\tconsole: false,\n\t\t\t\t\tdefine: false\n\t\t\t\t},\n\t\t\t\tlatedef: \"nofunc\",\n\t\t\t\tmaxparams: 3,\n\t\t\t\tnoarg: true,\n\t\t\t\tnocomma: true,\n\t\t\t\tnonbsp: true,\n\t\t\t\tnonew: true,\n\t\t\t\tundef: true,\n\t\t\t\tunused: true,\n\t\t\t\t// environments\n\t\t\t\tbrowser: true,\n\t\t\t\tnode: true,\n\t\t\t},\n\t\t\tfiles: [ 'Gruntfile.cjs', 'js/ladda.js' ]\n\t\t},\n\n\t\tconnect: {\n\t\t\tserver: {\n\t\t\t\toptions: {\n\t\t\t\t\tport: 8000,\n\t\t\t\t\tbase: 'site',\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tcopy: {\n\t\t\tcss: {\n\t\t\t    files: [\n\t\t\t\t    { src: ['dist/ladda*.min.css'], dest: 'site/' }\n\t\t\t    ]\n\t\t\t}\n\t\t},\n\n\t\twatch: {\n\t\t\tmain: {\n\t\t\t\tfiles: [ 'Gruntfile.js', 'js/ladda.js' ],\n\t\t\t\ttasks: 'js',\n\t\t\t\toptions: {\n\t\t\t\t\tlivereload: true,\n\t\t\t\t},\n\t\t\t},\n\t\t\ttheme: {\n\t\t\t\tfiles: [ 'css/*.scss' ],\n\t\t\t\ttasks: 'css',\n\t\t\t\toptions: {\n\t\t\t\t\tlivereload: true,\n\t\t\t\t},\n\t\t\t}\n\t\t}\n\n\t});\n\n\t// Dependencies\n\tgrunt.loadNpmTasks('grunt-contrib-jshint');\n\tgrunt.loadNpmTasks('grunt-contrib-watch');\n\tgrunt.loadNpmTasks('grunt-sass');\n\tgrunt.loadNpmTasks('grunt-contrib-connect');\n\tgrunt.loadNpmTasks('grunt-contrib-copy');\n\n\t// Default task\n\tgrunt.registerTask('default', ['jshint', 'css']);\n\n\t// Theme task\n\tgrunt.registerTask('css', ['sass', 'copy']);\n\n\t// Serve presentation locally\n\tgrunt.registerTask('serve', ['connect', 'watch']);\n};\n"
  },
  {
    "path": "LICENSE",
    "content": "Copyright (C) 2017 Hakim El Hattab, http://hakim.se\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE."
  },
  {
    "path": "README.md",
    "content": "# Ladda\n\nButtons with built-in loading indicators, effectively bridging the gap between action and feedback.\n\n[Check out the demo page](https://lab.hakim.se/ladda/).\n\n## Installation\n\n`npm install ladda`\n\n### Module bundling\n\nLadda 2.x is distributed as a standard ES6 module. Since not all browsers/environments support native\nES6 modules, it is recommended to use a bundler such as <a href=\"https://rollupjs.org/\">Rollup</a>,\n<a href=\"https://parceljs.org/\">Parcel</a>, or <a href=\"https://webpack.js.org/\">Webpack</a> to create\na production-ready code bundle.\n\n## Usage\n\n### CSS\n\nYou will need to include ONE of the two style sheets in the **/dist** directory.\nIf you want the button styles used on the demo page, use the **ladda.min.css** file.\nIf you want to have the functional buttons without the visual style (colors, padding, etc.),\nuse the **ladda-themeless.min.css** file.\n\n### HTML\n\nBelow is an example of a button using the `expand-right` animation style.\n\n```html\n<button class=\"ladda-button\" data-style=\"expand-right\">Submit</button>\n```\n\nWhen the JS code runs to bind Ladda to the button, the `ladda-button` class\nwill be automatically added if it doesn't already exist. Additionally, a span\nwith class `ladda-label` will automatically wrap the button text, resulting\nin the following DOM structure:\n\n```html\n<button class=\"ladda-button\" data-style=\"expand-right\">\n    <span class=\"ladda-label\">Submit</span>\n</button>\n```\n\nButtons accept the following attributes:\n- **data-style**: one of the button styles *[required]*\n  - expand-left, expand-right, expand-up, expand-down\n  - contract, contract-overlay\n  - zoom-in, zoom-out\n  - slide-left, slide-right, slide-up, slide-down\n- **data-color**: green/red/blue/purple/mint\n- **data-size**: xs/s/l/xl, defaults to medium\n- **data-spinner-size**: pixel dimensions of spinner, defaults to dynamic size based on the button height\n- **data-spinner-color**: a hex code or any named CSS color, defaults to `#fff`\n- **data-spinner-lines**: the number of lines for the spinner, defaults to `12`\n\n### JavaScript\n\nStart by importing the Ladda module:\n\n```javascript\nimport * as Ladda from 'ladda';\n```\n\nThe following approach is recommended for JavaScript control over your buttons:\n\n```javascript\n// Create a new instance of ladda for the specified button\nvar l = Ladda.create(document.querySelector('.my-button'));\n\n// Start loading\nl.start();\n\n// Will display a progress bar for 50% of the button width\nl.setProgress(0.5);\n\n// Stop loading\nl.stop();\n\n// Toggle between loading/not loading states\nl.toggle();\n\n// Check the current state\nl.isLoading();\n\n// Delete the button's ladda instance\nl.remove();\n```\n\nTo show the loading animation for a form that is submitted to the server\n(always resulting in a page reload) the `bind()` method can be used:\n\n```javascript\n// Automatically trigger the loading animation on click\nLadda.bind('button[type=submit]');\n\n// Same as the above but automatically stops after two seconds\nLadda.bind('button[type=submit]', {timeout: 2000});\n```\n\nNote: when using the `bind()` method on buttons that are inside a form,\nloading indicators will not be shown until the form is valid.\n\nAll loading animations on the page can be stopped by using:\n\n```javascript\nLadda.stopAll();\n```\n\n## Browser support\n\nLadda has been tested in Firefox, Microsoft Edge, Chrome, and Internet Explorer 11.\nIt also Should Work™ in Safari and Internet Explorer 10.\n\n## Changelog\n\n<https://github.com/hakimel/Ladda/blob/master/CHANGELOG.md>\n\n## License\n\nMIT\n"
  },
  {
    "path": "css/ladda-themed.scss",
    "content": "/*!\n * Ladda including the default theme.\n */\n\n@import \"ladda\";\n\n/*************************************\n * CONFIG\n */\n\n$green: #2aca76;\n$blue: #53b5e6;\n$red: #ea8557;\n$purple: #9973C2;\n$mint: #16a085;\n\n\n/*************************************\n * BUTTON THEME\n */\n\n.ladda-button {\n    background: #666;\n    border: 0;\n    padding: 14px 18px;\n    font-size: 18px;\n    cursor: pointer;\n\n    color: #fff;\n    border-radius: 2px;\n    border: 1px solid transparent;\n\n    -webkit-appearance: none;\n    -webkit-font-smoothing: antialiased;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n    &:hover {\n        border-color: rgba( 0, 0, 0, 0.07 );\n        background-color: #888;\n    }\n\n    @include buttonColor( 'green', $green );\n    @include buttonColor( 'blue', $blue );\n    @include buttonColor( 'red', $red );\n    @include buttonColor( 'purple', $purple );\n    @include buttonColor( 'mint', $mint );\n\n    &[disabled],\n    &[data-loading] {\n        border-color: rgba( 0, 0, 0, 0.07 );\n\n        &, &:hover {\n            cursor: default;\n            background-color: #999;\n        }\n    }\n\n    &[data-size=xs] {\n        padding: 4px 8px;\n\n        .ladda-label {\n            font-size: 0.7em;\n        }\n    }\n\n    &[data-size=s] {\n        padding: 6px 10px;\n\n        .ladda-label {\n            font-size: 0.9em;\n        }\n    }\n\n    &[data-size=l] .ladda-label {\n        font-size: 1.2em;\n    }\n\n    &[data-size=xl] .ladda-label {\n        font-size: 1.5em;\n    }\n}\n"
  },
  {
    "path": "css/ladda.scss",
    "content": "/*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n\n/*************************************\n * CONFIG\n */\n\n@use \"sass:math\";\n\n$spinnerSize: 32px !default;\n\n\n/*************************************\n * MIXINS\n */\n\n@mixin buttonColor( $name, $color ) {\n    &[data-color=#{$name}] {\n        background: $color;\n\n        &:hover {\n            background-color: lighten( $color, 5% );\n        }\n    }\n}\n\n\n/*************************************\n * Opacity animation for spin.js\n */\n\n@keyframes ladda-spinner-line-fade {\n  0%, 100% {\n    opacity: 0.22; /* minimum opacity */\n  }\n  1% {\n    opacity: 1;\n  }\n}\n\n\n/*************************************\n * BUTTON BASE\n */\n\n.ladda-button {\n    position: relative;\n}\n\n\n/* Spinner animation */\n.ladda-button .ladda-spinner {\n    position: absolute;\n    z-index: 2;\n    display: inline-block;\n    width: $spinnerSize;\n    top: 50%;\n    margin-top: 0;\n    opacity: 0;\n    pointer-events: none;\n}\n\n/* Button label */\n.ladda-button .ladda-label {\n    position: relative;\n    z-index: 3;\n}\n\n/* Progress bar */\n.ladda-button .ladda-progress {\n    position: absolute;\n    width: 0;\n    height: 100%;\n    left: 0;\n    top: 0;\n    background: rgba( 0, 0, 0, 0.2 );\n    display: none;\n    transition: 0.1s linear all;\n}\n\n.ladda-button[data-loading] .ladda-progress {\n    display: block;\n}\n\n\n/*************************************\n * EASING\n */\n\n.ladda-button,\n.ladda-button .ladda-spinner,\n.ladda-button .ladda-label {\n    transition: 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275) all;\n}\n\n.ladda-button[data-style=zoom-in],\n.ladda-button[data-style=zoom-in] .ladda-spinner,\n.ladda-button[data-style=zoom-in] .ladda-label,\n.ladda-button[data-style=zoom-out],\n.ladda-button[data-style=zoom-out] .ladda-spinner,\n.ladda-button[data-style=zoom-out] .ladda-label {\n    transition: 0.3s ease all;\n}\n\n\n/*************************************\n * EXPAND RIGHT\n */\n\n.ladda-button[data-style=expand-right] {\n    .ladda-spinner {\n        right: math.div($spinnerSize, -2) + 10;\n    }\n\n    &[data-size=\"s\"] .ladda-spinner,\n    &[data-size=\"xs\"] .ladda-spinner {\n        right: math.div($spinnerSize, -2) + 4;\n    }\n\n    &[data-loading] {\n        padding-right: 56px;\n\n        .ladda-spinner {\n            opacity: 1;\n        }\n\n        &[data-size=\"s\"],\n        &[data-size=\"xs\"] {\n            padding-right: 40px;\n        }\n    }\n}\n\n\n/*************************************\n * EXPAND LEFT\n */\n\n.ladda-button[data-style=expand-left] {\n    .ladda-spinner {\n        left: $spinnerSize * 0.5 + 10;\n    }\n\n    &[data-size=\"s\"] .ladda-spinner,\n    &[data-size=\"xs\"] .ladda-spinner {\n        left: 4px;\n    }\n\n    &[data-loading] {\n        padding-left: 56px;\n\n        .ladda-spinner {\n            opacity: 1;\n        }\n\n        &[data-size=\"s\"],\n        &[data-size=\"xs\"] {\n            padding-left: 40px;\n        }\n    }\n}\n\n\n/*************************************\n * EXPAND UP\n */\n\n.ladda-button[data-style=expand-up] {\n    overflow: hidden;\n\n    .ladda-spinner {\n        top: -$spinnerSize;\n        left: 50%;\n        margin-left: 0;\n    }\n\n    &[data-loading] {\n        padding-top: 54px;\n\n        .ladda-spinner {\n            opacity: 1;\n            top: ($spinnerSize * 0.5) + 10;\n            margin-top: 0;\n        }\n\n        &[data-size=\"s\"],\n        &[data-size=\"xs\"] {\n            padding-top: 32px;\n\n            .ladda-spinner {\n                top: 4px;\n            }\n        }\n    }\n}\n\n\n/*************************************\n * EXPAND DOWN\n */\n\n .ladda-button[data-style=expand-down] {\n    overflow: hidden;\n\n    .ladda-spinner {\n        top: 62px;\n        left: 50%;\n        margin-left: 0;\n    }\n\n    &[data-size=\"s\"] .ladda-spinner,\n    &[data-size=\"xs\"] .ladda-spinner {\n        top: 40px;\n    }\n\n    &[data-loading] {\n        padding-bottom: 54px;\n\n        .ladda-spinner {\n            opacity: 1;\n        }\n\n        &[data-size=\"s\"],\n        &[data-size=\"xs\"] {\n            padding-bottom: 32px;\n        }\n    }\n }\n\n\n/*************************************\n * SLIDE LEFT\n */\n.ladda-button[data-style=slide-left] {\n    overflow: hidden;\n\n    .ladda-label {\n        position: relative;\n    }\n\n    .ladda-spinner {\n        left: 100%;\n        margin-left: 0;\n    }\n\n    &[data-loading] {\n        .ladda-label {\n            opacity: 0;\n            left: -100%;\n        }\n\n        .ladda-spinner {\n            opacity: 1;\n            left: 50%;\n        }\n    }\n}\n\n\n/*************************************\n * SLIDE RIGHT\n */\n.ladda-button[data-style=slide-right] {\n    overflow: hidden;\n\n    .ladda-label {\n        position: relative;\n    }\n\n    .ladda-spinner {\n        right: 100%;\n        margin-left: 0;\n        left: $spinnerSize * 0.5;\n\n        [dir=\"rtl\"] & {\n            right: auto;\n        }\n    }\n\n    &[data-loading] {\n        .ladda-label {\n            opacity: 0;\n            left: 100%;\n        }\n\n        .ladda-spinner {\n            opacity: 1;\n            left: 50%;\n        }\n    }\n}\n\n\n/*************************************\n * SLIDE UP\n */\n.ladda-button[data-style=slide-up] {\n    overflow: hidden;\n\n    .ladda-label {\n        position: relative;\n    }\n\n    .ladda-spinner {\n        left: 50%;\n        margin-left: 0;\n        margin-top: 1em;\n    }\n\n    &[data-loading] {\n        .ladda-label {\n            opacity: 0;\n            top: -1em;\n        }\n\n        .ladda-spinner {\n            opacity: 1;\n            margin-top: 0;\n        }\n    }\n}\n\n\n/*************************************\n * SLIDE DOWN\n */\n.ladda-button[data-style=slide-down] {\n    overflow: hidden;\n\n    .ladda-label {\n        position: relative;\n    }\n\n    .ladda-spinner {\n        left: 50%;\n        margin-left: 0;\n        margin-top: -2em;\n    }\n\n    &[data-loading] {\n        .ladda-label {\n            opacity: 0;\n            top: 1em;\n        }\n\n        .ladda-spinner {\n            opacity: 1;\n            margin-top: 0;\n        }\n    }\n}\n\n\n/*************************************\n * ZOOM-OUT\n */\n\n.ladda-button[data-style=zoom-out] {\n    overflow: hidden;\n\n    .ladda-label {\n        position: relative;\n        display: inline-block;\n    }\n\n    .ladda-spinner {\n        left: 50%;\n        margin-left: $spinnerSize;\n        transform: scale(2.5);\n    }\n\n    &[data-loading] {\n        .ladda-label {\n            opacity: 0;\n            transform: scale(0.5);\n        }\n\n        .ladda-spinner {\n            opacity: 1;\n            margin-left: 0;\n            transform: none;\n        }\n    }\n}\n\n\n/*************************************\n * ZOOM-IN\n */\n\n.ladda-button[data-style=zoom-in] {\n    overflow: hidden;\n\n    .ladda-label {\n        position: relative;\n        display: inline-block;\n    }\n\n    .ladda-spinner {\n        left: 50%;\n        margin-left: math.div($spinnerSize, -2);\n        transform: scale(0.2);\n    }\n    \n    &[data-loading] {\n        .ladda-label {\n            opacity: 0;\n            transform: scale(2.2);\n        }\n\n        .ladda-spinner {\n            opacity: 1;\n            margin-left: 0;\n            transform: none;\n        }\n    }\n}\n\n\n/*************************************\n * CONTRACT\n */\n\n.ladda-button[data-style=contract] {\n    overflow: hidden;\n    width: 100px;\n\n    .ladda-spinner {\n        left: 50%;\n        margin-left: 0;\n    }\n\n    &[data-loading] {\n        border-radius: 50%;\n        width: 52px;\n\n        .ladda-label {\n            opacity: 0;\n        }\n\n        .ladda-spinner {\n            opacity: 1;\n        }\n    }\n}\n\n\n/*************************************\n * OVERLAY\n */\n\n.ladda-button[data-style=contract-overlay] {\n    overflow: hidden;\n    width: 100px;\n    box-shadow: 0px 0px 0px 2000px rgba(0,0,0,0);\n    \n    .ladda-spinner {\n        left: 50%;\n        margin-left: 0;\n    }\n    \n    &[data-loading] {\n        border-radius: 50%;\n        width: 52px;\n        box-shadow: 0px 0px 0px 2000px rgba(0,0,0,0.8);\n\n        .ladda-label {\n            opacity: 0;\n        }\n\n        .ladda-spinner {\n            opacity: 1;\n        }\n    }\n}\n\n\n[dir=\"rtl\"] .ladda-spinner > div {\n    left: 25% !important;\n}\n"
  },
  {
    "path": "js/ladda.d.ts",
    "content": "export interface LaddaButton {\n    start(): LaddaButton,\n    startAfter(delay: number): LaddaButton,\n    stop(): LaddaButton,\n    toggle(): LaddaButton,\n    setProgress(progress: number): void,\n    isLoading(): boolean,\n    remove(): void,\n}\n\nexport interface BindOptions {\n    /**\n     * Number of milliseconds to wait before automatically cancelling the animation.\n     */\n    timeout?: number,\n\n    /**\n     * A function to be called with the Ladda instance when a target button is clicked.\n     */\n    callback?: (instance: LaddaButton) => void,\n}\n\n/**\n * Creates a new instance of Ladda which wraps the target button element.\n */\nexport function create(button: HTMLButtonElement): LaddaButton;\n\n/**\n * Binds the target buttons to automatically enter the loading state when clicked.\n * @param target Either an HTML element or a CSS selector.\n */\nexport function bind(target: HTMLElement | string, options?: BindOptions): void;\n\n/**\n * Stops all current loading animations.\n */\nexport function stopAll(): void;\n"
  },
  {
    "path": "js/ladda.js",
    "content": "/*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\nimport {Spinner} from 'spin.js';\n\n// All currently instantiated instances of Ladda\nvar ALL_INSTANCES = [];\n\n/**\n * Creates a new instance of Ladda which wraps the\n * target button element.\n *\n * @return An API object that can be used to control\n * the loading animation state.\n */\nexport function create(button) {\n    if (typeof button === 'undefined') {\n        console.warn(\"Ladda button target must be defined.\");\n        return;\n    }\n\n    // The button must have the class \"ladda-button\"\n    if (!button.classList.contains('ladda-button')) {\n        button.classList.add('ladda-button');\n    }\n\n    // Style is required, default to \"expand-right\"\n    if (!button.hasAttribute('data-style')) {\n        button.setAttribute('data-style', 'expand-right');\n    }\n\n    // The text contents must be wrapped in a ladda-label\n    // element, create one if it doesn't already exist\n    if (!button.querySelector('.ladda-label')) {\n        var laddaLabel = document.createElement('span');\n        laddaLabel.className = 'ladda-label';\n        wrapContent(button, laddaLabel);\n    }\n\n    // The spinner component\n    var spinnerWrapper = button.querySelector('.ladda-spinner');\n\n    // Wrapper element for the spinner\n    if (!spinnerWrapper) {\n        spinnerWrapper = document.createElement('span');\n        spinnerWrapper.className = 'ladda-spinner';\n    }\n\n    button.appendChild(spinnerWrapper);\n\n    // Timer used to delay starting/stopping\n    var timer;\n    var spinner;\n\n    var instance = {\n        /**\n         * Enter the loading state.\n         */\n        start: function() {\n            // Create the spinner if it doesn't already exist\n            if (!spinner) {\n                spinner = createSpinner(button);\n            }\n\n            button.disabled = true;\n            button.setAttribute('data-loading', '');\n\n            clearTimeout(timer);\n            spinner.spin(spinnerWrapper);\n\n            this.setProgress(0);\n\n            return this; // chain\n        },\n\n        /**\n         * Enter the loading state, after a delay.\n         */\n        startAfter: function(delay) {\n            clearTimeout(timer);\n            timer = setTimeout(function() { instance.start(); }, delay);\n\n            return this; // chain\n        },\n\n        /**\n         * Exit the loading state.\n         */\n        stop: function() {\n            if (instance.isLoading()) {\n                button.disabled = false;\n                button.removeAttribute('data-loading');   \n            }\n\n            // Kill the animation after a delay to make sure it\n            // runs for the duration of the button transition\n            clearTimeout(timer);\n\n            if (spinner) {\n                timer = setTimeout(function() { spinner.stop(); }, 1000);\n            }\n\n            return this; // chain\n        },\n\n        /**\n         * Toggle the loading state on/off.\n         */\n        toggle: function() {\n            return this.isLoading() ? this.stop() : this.start();\n        },\n\n        /**\n         * Sets the width of the visual progress bar inside of\n         * this Ladda button\n         *\n         * @param {number} progress in the range of 0-1\n         */\n        setProgress: function(progress) {\n            // Cap it\n            progress = Math.max(Math.min(progress, 1), 0);\n\n            var progressElement = button.querySelector('.ladda-progress');\n\n            // Remove the progress bar if we're at 0 progress\n            if (progress === 0 && progressElement && progressElement.parentNode) {\n                progressElement.parentNode.removeChild(progressElement);\n            } else {\n                if (!progressElement) {\n                    progressElement = document.createElement('div');\n                    progressElement.className = 'ladda-progress';\n                    button.appendChild(progressElement);\n                }\n\n                progressElement.style.width = ((progress || 0) * button.offsetWidth) + 'px';\n            }\n        },\n\n        isLoading: function() {\n            return button.hasAttribute('data-loading');\n        },\n\n        remove: function() {\n            clearTimeout(timer);\n            button.disabled = false;\n            button.removeAttribute('data-loading');\n\n            if (spinner) {\n                spinner.stop();\n                spinner = null;\n            }\n\n            ALL_INSTANCES.splice(ALL_INSTANCES.indexOf(instance), 1);\n        }\n    };\n\n    ALL_INSTANCES.push(instance);\n\n    return instance;\n}\n\n/**\n * Binds the target buttons to automatically enter the\n * loading state when clicked.\n *\n * @param target Either an HTML element or a CSS selector.\n * @param options\n *          - timeout Number of milliseconds to wait before\n *            automatically cancelling the animation.\n *          - callback A function to be called with the Ladda\n *            instance when a target button is clicked.\n */\nexport function bind(target, options) {\n    var targets;\n\n    if (typeof target === 'string') {\n        targets = document.querySelectorAll(target);\n    } else if (typeof target === 'object') {\n        targets = [target];\n    } else {\n        throw new Error('target must be string or object');\n    }\n\n    options = options || {};\n\n    for (var i = 0; i < targets.length; i++) {\n        bindElement(targets[i], options);\n    }\n}\n\n/**\n * Stops ALL current loading animations.\n */\nexport function stopAll() {\n    for (var i = 0, len = ALL_INSTANCES.length; i < len; i++) {\n        ALL_INSTANCES[i].stop();\n    }\n}\n\n/**\n* Get the first ancestor node from an element, having a\n* certain type.\n*\n* @param elem An HTML element\n* @param type an HTML tag type (uppercased)\n*\n* @return An HTML element\n*/\nfunction getAncestorOfTagType(elem, type) {\n    while (elem.parentNode && elem.tagName !== type) {\n        elem = elem.parentNode;\n    }\n\n    return (type === elem.tagName) ? elem : undefined;\n}\n\nfunction createSpinner(button) {\n    var height = button.offsetHeight,\n        spinnerColor,\n        spinnerLines;\n\n    if (height === 0) {\n        // We may have an element that is not visible so\n        // we attempt to get the height in a different way\n        height = parseFloat(window.getComputedStyle(button).height);\n    }\n\n    // If the button is tall we can afford some padding\n    if (height > 32) {\n        height *= 0.8;\n    }\n\n    // Prefer an explicit height if one is defined\n    if (button.hasAttribute('data-spinner-size')) {\n        height = parseInt(button.getAttribute('data-spinner-size'), 10);\n    }\n\n    // Allow buttons to specify the color of the spinner element\n    if (button.hasAttribute('data-spinner-color')) {\n        spinnerColor = button.getAttribute('data-spinner-color');\n    }\n\n    // Allow buttons to specify the number of lines of the spinner\n    if (button.hasAttribute('data-spinner-lines')) {\n        spinnerLines = parseInt(button.getAttribute('data-spinner-lines'), 10);\n    }\n\n    var radius = height * 0.2,\n        length = radius * 0.6,\n        width = radius < 7 ? 2 : 3;\n\n    return new Spinner({\n        color: spinnerColor || '#fff',\n        lines: spinnerLines || 12,\n        radius: radius,\n        length: length,\n        width: width,\n        animation: 'ladda-spinner-line-fade',\n        zIndex: 'auto',\n        top: 'auto',\n        left: 'auto',\n        className: ''\n    });\n}\n\nfunction wrapContent(node, wrapper) {\n    var r = document.createRange();\n    r.selectNodeContents(node);\n    r.surroundContents(wrapper);\n    node.appendChild(wrapper);\n}\n\nfunction bindElement(element, options) {\n    if (typeof element.addEventListener !== 'function') {\n        return;\n    }\n\n    var instance = create(element);\n    var timeout = -1;\n\n    element.addEventListener('click', function() {\n        // If the button belongs to a form, make sure all the\n        // fields in that form are filled out\n        var valid = true;\n        var form = getAncestorOfTagType(element, 'FORM');\n\n        if (typeof form !== 'undefined' && !form.hasAttribute('novalidate')) {\n            // Modern form validation\n            if (typeof form.checkValidity === 'function') {\n                valid = form.checkValidity();\n            }\n        }\n\n        if (valid) {\n            // This is asynchronous to avoid an issue where disabling\n            // the button prevents forms from submitting\n            instance.startAfter(1);\n\n            // Set a loading timeout if one is specified\n            if (typeof options.timeout === 'number') {\n                clearTimeout(timeout);\n                timeout = setTimeout(instance.stop, options.timeout);\n            }\n\n            // Invoke callbacks\n            if (typeof options.callback === 'function') {\n                options.callback.apply(null, [instance]);\n            }\n        }\n\n    }, false);\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"ladda\",\n  \"version\": \"2.0.3\",\n  \"description\": \"Buttons with built-in loading indicators\",\n  \"homepage\": \"https://lab.hakim.se/ladda/\",\n  \"files\": [\n    \"css/*.scss\",\n    \"dist/*.css\",\n    \"js/ladda.d.ts\",\n    \"js/ladda.js\"\n  ],\n  \"type\": \"module\",\n  \"main\": \"./js/ladda.js\",\n  \"types\": \"./js/ladda.d.ts\",\n  \"scripts\": {\n    \"test\": \"grunt jshint --gruntfile Gruntfile.cjs\",\n    \"prepare\": \"grunt --gruntfile Gruntfile.cjs && rollup -c\",\n    \"start\": \"grunt serve --gruntfile Gruntfile.cjs\"\n  },\n  \"author\": \"Hakim El Hattab <hakim.elhattab@gmail.com> https://hakim.se\",\n  \"contributors\": [\n    \"Theodore Brown <theodorejb@outlook.com> https://theodorejb.me\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git://github.com/hakimel/Ladda.git\"\n  },\n  \"devDependencies\": {\n    \"grunt\": \"^1.4.1\",\n    \"grunt-contrib-connect\": \"^3.0.0\",\n    \"grunt-contrib-copy\": \"^1.0.0\",\n    \"grunt-contrib-jshint\": \"^3.1.1\",\n    \"grunt-contrib-watch\": \"^1.1.0\",\n    \"grunt-sass\": \"^3.1.0\",\n    \"rollup\": \"^2.60.2\",\n    \"rollup-plugin-node-resolve\": \"^5.2.0\",\n    \"sass\": \"^1.44.0\"\n  },\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"spin.js\": \"^4.1.1\"\n  }\n}\n"
  },
  {
    "path": "rollup.config.js",
    "content": "import resolve from 'rollup-plugin-node-resolve';\n\nexport default [\n    {\n        input: 'site/index.js',\n        output: {\n            file: 'site/dist/index-bundle.js',\n            format: 'iife'\n        },\n        plugins: [resolve()]\n    },\n    {\n        input: 'site/form.js',\n        output: {\n            file: 'site/dist/form-bundle.js',\n            format: 'iife'\n        },\n        plugins: [resolve()]\n    },\n];\n"
  },
  {
    "path": "site/bootstrap.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<title>Ladda: Bootstrap compatibility test</title>\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\t\t<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\n\t\t\tintegrity=\"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1\" crossorigin=\"anonymous\">\n\t\t<link rel=\"stylesheet\" href=\"demo.css\">\n\t\t<link rel=\"stylesheet\" href=\"dist/ladda-themeless.min.css\">\n\t</head>\n\t<body>\n\t\t<article class=\"examples\">\n\t\t\t<div class=\"intro\">\n\t\t\t\t<h1>Ladda Bootstrap 5 test</h1>\n\t\t\t</div>\n\n            <section class=\"button-demo\">\n\t\t\t\t<h3>expand-left</h3>\n\t\t\t\t<button class=\"btn btn-primary ladda-button\" data-style=\"expand-left\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-right</h3>\n\t\t\t\t<button class=\"btn btn-primary ladda-button\" data-style=\"expand-right\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-up</h3>\n\t\t\t\t<button class=\"btn btn-primary ladda-button\" data-style=\"expand-up\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-down</h3>\n\t\t\t\t<button class=\"btn btn-primary ladda-button\" data-style=\"expand-down\">Submit</button>\n\t\t\t</section>\n\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>zoom-in</h3>\n\t\t\t\t<button class=\"btn btn-info ladda-button\" data-style=\"zoom-in\" data-spinner-color=\"#000\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>zoom-out</h3>\n\t\t\t\t<button class=\"btn btn-info ladda-button\" data-style=\"zoom-out\" data-spinner-color=\"#000\">Submit</button>\n\t\t\t</section>\n\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-left</h3>\n\t\t\t\t<button class=\"btn btn-warning ladda-button\" data-style=\"slide-left\" data-spinner-color=\"#000\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-right</h3>\n\t\t\t\t<button class=\"btn btn-warning ladda-button\" data-style=\"slide-right\" data-spinner-color=\"#000\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-up</h3>\n\t\t\t\t<button class=\"btn btn-warning ladda-button\" data-style=\"slide-up\" data-spinner-color=\"#000\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-down</h3>\n\t\t\t\t<button class=\"btn btn-warning ladda-button\" data-style=\"slide-down\" data-spinner-color=\"#000\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<h3 id=\"progress\">Built-in progress bar</h3>\n\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>expand-right</h3>\n\t\t\t\t<button class=\"btn btn-success ladda-button\" data-style=\"expand-right\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>contract</h3>\n\t\t\t\t<button class=\"btn btn-success ladda-button\" data-style=\"contract\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<h3 id=\"sizes\">Sizes</h3>\n\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>Small</h3>\n\t\t\t\t<button class=\"btn btn-danger btn-sm ladda-button\" data-style=\"expand-right\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>Large</h3>\n\t\t\t\t<button class=\"btn btn-danger btn-lg ladda-button\" data-style=\"expand-right\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<h3>Buttons in forms containing required inputs</h3>\n\n\t\t\t<section>\n\t\t\t\t<form action=\"https://example.com\">\n\t\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t\t<input class=\"form-control\" type=\"text\" name=\"aText\" placeholder=\"Please fill me\" required/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"mb-3\">\n\t\t\t\t\t\t<button id=\"aFormSubmitButton\" type=\"submit\" class=\"btn btn-primary ladda-button\" data-style=\"expand-left\">Submit</button>\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t</section>\n\t\t</article>\n\n\t\t<script src=\"dist/index-bundle.js\"></script>\n\t</body>\n</html>\n"
  },
  {
    "path": "site/bootstrap3.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<title>Ladda: Bootstrap compatibility test</title>\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\t\t<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css\"\n\t\t\tintegrity=\"sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu\" crossorigin=\"anonymous\">\n\t\t<link rel=\"stylesheet\" href=\"demo.css\">\n\t\t<link rel=\"stylesheet\" href=\"dist/ladda-themeless.min.css\">\n\t</head>\n\t<body>\n\t\t<article class=\"examples\">\n\t\t\t<div class=\"intro\">\n\t\t\t\t<h1>Ladda Bootstrap 3 test</h1>\n\t\t\t</div>\n\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-left</h3>\n\t\t\t\t<button class=\"btn btn-primary ladda-button\" data-style=\"expand-left\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-right</h3>\n\t\t\t\t<button class=\"btn btn-primary ladda-button\" data-style=\"expand-right\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-up</h3>\n\t\t\t\t<button class=\"btn btn-primary ladda-button\" data-style=\"expand-up\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-down</h3>\n\t\t\t\t<button class=\"btn btn-primary ladda-button\" data-style=\"expand-down\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>zoom-in</h3>\n\t\t\t\t<button class=\"btn btn-info ladda-button\" data-style=\"zoom-in\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>zoom-out</h3>\n\t\t\t\t<button class=\"btn btn-info ladda-button\" data-style=\"zoom-out\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-left</h3>\n\t\t\t\t<button class=\"btn btn-warning ladda-button\" data-style=\"slide-left\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-right</h3>\n\t\t\t\t<button class=\"btn btn-warning ladda-button\" data-style=\"slide-right\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-up</h3>\n\t\t\t\t<button class=\"btn btn-warning ladda-button\" data-style=\"slide-up\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-down</h3>\n\t\t\t\t<button class=\"btn btn-warning ladda-button\" data-style=\"slide-down\">Submit</button>\n\t\t\t</section>\n\t\t\n\t\t\t<h3 id=\"progress\">Built-in progress bar</h3>\n\t\t\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>expand-right</h3>\n\t\t\t\t<button class=\"btn btn-success ladda-button\" data-style=\"expand-right\">Submit</button>\n\t\t\t</section>\n\t\t\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>contract</h3>\n\t\t\t\t<button class=\"btn btn-success ladda-button\" data-style=\"contract\">Submit</button>\n\t\t\t</section>\n\t\t\n\t\t\t<h3 id=\"sizes\">Sizes</h3>\n\t\t\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>Small</h3>\n\t\t\t\t<button class=\"btn btn-danger btn-sm ladda-button\" data-style=\"expand-right\">Submit</button>\n\t\t\t</section>\n\t\t\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>Large</h3>\n\t\t\t\t<button class=\"btn btn-danger btn-lg ladda-button\" data-style=\"expand-right\">Submit</button>\n\t\t\t</section>\n\t\t\n\t\t\t<h3>Buttons in forms containing required inputs</h3>\n\t\t\n\t\t\t<section>\n\t\t\t\t<form action=\"https://example.com\">\n\t\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t\t<input class=\"form-control\" type=\"text\" name=\"aText\" placeholder=\"Please fill me\" required />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t\t<button id=\"aFormSubmitButton\" type=\"submit\" class=\"btn btn-primary ladda-button\"\n\t\t\t\t\t\t\tdata-style=\"expand-left\">Submit</button>\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t</section>\n\t\t</article>\n\n\t\t<script src=\"dist/index-bundle.js\"></script>\n\t</body>\n</html>\n"
  },
  {
    "path": "site/bootstrap4.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<title>Ladda: Bootstrap compatibility test</title>\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t\t\n\t\t<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css\"\n\t\t\tintegrity=\"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2\" crossorigin=\"anonymous\">\n\t\t<link rel=\"stylesheet\" href=\"demo.css\">\n\t\t<link rel=\"stylesheet\" href=\"dist/ladda-themeless.min.css\">\n\t</head>\n\t<body>\n\t\t<article class=\"examples\">\n\t\t\t<div class=\"intro\">\n\t\t\t\t<h1>Ladda Bootstrap 4 test</h1>\n\t\t\t</div>\n\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-left</h3>\n\t\t\t\t<button class=\"btn btn-primary ladda-button\" data-style=\"expand-left\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-right</h3>\n\t\t\t\t<button class=\"btn btn-primary ladda-button\" data-style=\"expand-right\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-up</h3>\n\t\t\t\t<button class=\"btn btn-primary ladda-button\" data-style=\"expand-up\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-down</h3>\n\t\t\t\t<button class=\"btn btn-primary ladda-button\" data-style=\"expand-down\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>zoom-in</h3>\n\t\t\t\t<button class=\"btn btn-info ladda-button\" data-style=\"zoom-in\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>zoom-out</h3>\n\t\t\t\t<button class=\"btn btn-info ladda-button\" data-style=\"zoom-out\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-left</h3>\n\t\t\t\t<button class=\"btn btn-warning ladda-button\" data-style=\"slide-left\" data-spinner-color=\"#000\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-right</h3>\n\t\t\t\t<button class=\"btn btn-warning ladda-button\" data-style=\"slide-right\" data-spinner-color=\"#000\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-up</h3>\n\t\t\t\t<button class=\"btn btn-warning ladda-button\" data-style=\"slide-up\" data-spinner-color=\"#000\">Submit</button>\n\t\t\t</section>\n\t\t\t\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-down</h3>\n\t\t\t\t<button class=\"btn btn-warning ladda-button\" data-style=\"slide-down\" data-spinner-color=\"#000\">Submit</button>\n\t\t\t</section>\n\t\t\n\t\t\t<h3 id=\"progress\">Built-in progress bar</h3>\n\t\t\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>expand-right</h3>\n\t\t\t\t<button class=\"btn btn-success ladda-button\" data-style=\"expand-right\">Submit</button>\n\t\t\t</section>\n\t\t\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>contract</h3>\n\t\t\t\t<button class=\"btn btn-success ladda-button\" data-style=\"contract\">Submit</button>\n\t\t\t</section>\n\t\t\n\t\t\t<h3 id=\"sizes\">Sizes</h3>\n\t\t\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>Small</h3>\n\t\t\t\t<button class=\"btn btn-danger btn-sm ladda-button\" data-style=\"expand-right\">Submit</button>\n\t\t\t</section>\n\t\t\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>Large</h3>\n\t\t\t\t<button class=\"btn btn-danger btn-lg ladda-button\" data-style=\"expand-right\">Submit</button>\n\t\t\t</section>\n\t\t\n\t\t\t<h3>Buttons in forms containing required inputs</h3>\n\t\t\n\t\t\t<section>\n\t\t\t\t<form action=\"https://example.com\">\n\t\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t\t<input class=\"form-control\" type=\"text\" name=\"aText\" placeholder=\"Please fill me\" required />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t\t<button id=\"aFormSubmitButton\" type=\"submit\" class=\"btn btn-primary ladda-button\"\n\t\t\t\t\t\t\tdata-style=\"expand-left\">Submit</button>\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t</section>\n\t\t</article>\n\n\t\t<script src=\"dist/index-bundle.js\"></script>\n\t</body>\n</html>\n"
  },
  {
    "path": "site/demo.css",
    "content": "/* Styles used specifically for the demo page */\n\nbody {\n    background: #f5f5f5;\n    font-family: monospace;\n    font-size: 14px;\n    color: #333333;\n}\n\nbutton {\n    outline: 0;\n}\n\n.examples {\n    max-width: 670px;\n    margin: 2em auto;\n    padding: 4em;\n    background: #fff;\n    text-align: center;\n}\n    .examples .intro {\n        margin-bottom: 3em;\n        line-height: 1.4em;\n        font-size: 16px;\n        text-align: left;\n    }\n        .examples .intro h1 {\n            margin-top: 0;\n            font-size: 18px;\n            font-weight: bold;\n        }\n\n    .examples h3 {\n        font-size: 17px;\n    }\n\n    .examples .outro {\n        display: block;\n        text-align: right;\n        margin-top: 3em;\n    }\n    .examples section {\n        display: inline-block;\n        width: 24%;\n        min-width: 160px;\n        margin-bottom: 2em;\n        text-align: center;\n        vertical-align: top;\n    }\n    .examples section h3 {\n        color: #bbb;\n        font-weight: normal;\n    }\n\n\n.sharing {\n    float: left;\n}\n\n.fork {\n    position: absolute;\n    top: 0;\n    right: 0;\n    border: none;\n}\n"
  },
  {
    "path": "site/form.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<title>Ladda: Form test</title>\n\n\t\t<link rel=\"stylesheet\" href=\"demo.css\">\n\t\t<link rel=\"stylesheet\" href=\"dist/ladda.min.css\">\n\t</head>\n\t<body>\n\t\t<article class=\"examples\">\n\t\t\t<div class=\"intro\">\n\t\t\t\t<h1>Ladda Form Validation</h1>\n\t\t\t\t<p>\n\t\t\t\t\tThis page can be used to test that Ladda does NOT start spinning when submitting an invalid form.\n\t\t\t\t</p>\n\t\t\t\t<form action=\"https://example.com\">\n\t\t\t\t\t<input type=\"email\" name=\"email\" placeholder=\"Email address...\" style=\"font-size: 1em; padding: 14px;\" required>\n\t\t\t\t\t<button type=\"submit\" class=\"ladda-button\" data-color=\"green\" data-style=\"expand-left\">Submit</button>\n\t\t\t\t</form>\n\t\t\t</div>\n\t\t</article>\n\n\t\t<script src=\"dist/form-bundle.js\"></script>\n\t</body>\n</html>\n"
  },
  {
    "path": "site/form.js",
    "content": "import * as Ladda from '../js/ladda.js';\n\nLadda.bind('button[type=submit]');\n"
  },
  {
    "path": "site/index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<title>Ladda</title>\n\t\t<meta name=\"author\" content=\"Hakim El Hattab\">\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n\n\t\t<link rel=\"stylesheet\" href=\"demo.css\">\n\t\t<link rel=\"stylesheet\" href=\"dist/ladda.min.css\">\n\t</head>\n\t<body>\n\t\t<article class=\"examples\">\n\t\t\t<div class=\"intro\">\n\t\t\t\t<h1>Ladda</h1>\n\t\t\t\t<p>\n\t\t\t\t\tA UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where \n\t\t\t\t\tit gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. For a \n\t\t\t\t\treal-world example, check out any of the forms on <a href=\"http://slides.com\">slides.com</a>.\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-left</h3>\n\t\t\t\t<button data-color=\"green\" data-style=\"expand-left\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-right</h3>\n\t\t\t\t<button data-color=\"green\" data-style=\"expand-right\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-up</h3>\n\t\t\t\t<button data-color=\"green\" data-style=\"expand-up\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>expand-down</h3>\n\t\t\t\t<button data-color=\"green\" data-style=\"expand-down\">Submit</button>\n\t\t\t</section>\n\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>contract</h3>\n\t\t\t\t<button class=\"ladda-button\" data-color=\"red\" data-style=\"contract\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>contract-overlay</h3>\n\t\t\t\t<button class=\"ladda-button\" data-color=\"red\" data-style=\"contract-overlay\" style=\"z-index: 10;\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>zoom-in</h3>\n\t\t\t\t<button class=\"ladda-button\" data-color=\"red\" data-style=\"zoom-in\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>zoom-out</h3>\n\t\t\t\t<button class=\"ladda-button\" data-color=\"red\" data-style=\"zoom-out\">Submit</button>\n\t\t\t</section>\n\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-left</h3>\n\t\t\t\t<button class=\"ladda-button\" data-color=\"blue\" data-style=\"slide-left\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-right</h3>\n\t\t\t\t<button class=\"ladda-button\" data-color=\"blue\" data-style=\"slide-right\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-up</h3>\n\t\t\t\t<button class=\"ladda-button\" data-color=\"blue\" data-style=\"slide-up\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"button-demo\">\n\t\t\t\t<h3>slide-down</h3>\n\t\t\t\t<button class=\"ladda-button\" data-color=\"blue\" data-style=\"slide-down\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<h3 id=\"progress\">Built-in progress bar</h3>\n\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>expand-right</h3>\n\t\t\t\t<button class=\"ladda-button\" data-color=\"purple\" data-style=\"expand-right\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>contract</h3>\n\t\t\t\t<button class=\"ladda-button\" data-color=\"purple\" data-style=\"contract\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<h3 id=\"sizes\">Sizes</h3>\n\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>Extra Small</h3>\n\t\t\t\t<button class=\"ladda-button\" data-color=\"mint\" data-style=\"expand-right\" data-size=\"xs\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>Small</h3>\n\t\t\t\t<button class=\"ladda-button\" data-color=\"mint\" data-style=\"expand-right\" data-size=\"s\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>Large</h3>\n\t\t\t\t<button class=\"ladda-button\" data-color=\"mint\" data-style=\"expand-right\" data-size=\"l\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<section class=\"progress-demo\">\n\t\t\t\t<h3>Extra Large</h3>\n\t\t\t\t<button class=\"ladda-button\" data-color=\"mint\" data-style=\"expand-right\" data-size=\"xl\">Submit</button>\n\t\t\t</section>\n\n\t\t\t<footer>\n\t\t\t\t<small class=\"sharing\">\n\t\t\t\t\t<a href=\"http://twitter.com/share\" class=\"twitter-share-button\" data-text=\"Ladda - Buttons with built-in loading indicators by @hakimel\" data-url=\"http://lab.hakim.se/ladda\" data-count=\"small\" data-related=\"hakimel\"></a>\n\t\t\t\t</small>\n\t\t\t\t<small class=\"outro\">by <a href=\"http://hakim.se\">Hakim El Hattab</a> / <a href=\"http://twitter.com/hakimel\">@hakimel</a></small>\n\t\t\t</footer>\n\t\t</article>\n\n\t\t<script src=\"dist/index-bundle.js\"></script>\n\n\t\t<a class=\"fork\" href=\"https://github.com/hakimel/Ladda\"><img width=\"149\" height=\"149\" src=\"https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=149%2C149\" alt=\"Fork me on GitHub\" data-recalc-dims=\"1\"></a>\n\n\t\t<script type=\"text/javascript\" src=\"http://platform.twitter.com/widgets.js\"></script>\n\t</body>\n</html>\n"
  },
  {
    "path": "site/index.js",
    "content": "import * as Ladda from '../js/ladda.js';\n\n// Bind normal buttons\nLadda.bind('.button-demo button', { timeout: 2000 });\n\n// Bind progress buttons and simulate loading progress\nLadda.bind('.progress-demo button', {\n    callback: function (instance) {\n        var progress = 0;\n        var interval = setInterval(function () {\n            progress = Math.min(progress + Math.random() * 0.1, 1);\n            instance.setProgress(progress);\n\n            if (progress === 1) {\n                instance.stop();\n                clearInterval(interval);\n            }\n        }, 200);\n    }\n});\n\n// You can control loading explicitly using the JavaScript API\n// as outlined below:\n\n// var l = Ladda.create( document.querySelector( 'button' ) );\n// l.start();\n// l.stop();\n// l.toggle();\n// l.isLoading();\n// l.setProgress( 0-1 );\n"
  },
  {
    "path": "site/rtl.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<title>Ladda</title>\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n\n\t\t<link rel=\"stylesheet\" href=\"demo.css\">\n\t\t<link rel=\"stylesheet\" href=\"dist/ladda.min.css\">\n\t</head>\n\t<body>\n\t\t<article class=\"examples\">\n\t\t\t<div class=\"intro\">\n\t\t\t\t<h1>Ladda RTL support</h1>\n\t\t\t</div>\n\n\t\t\t<div dir=\"rtl\">\n\t\t\t\t<section class=\"button-demo\">\n\t\t\t\t\t<h3>expand-left</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"green\" data-style=\"expand-left\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<section class=\"button-demo\">\n\t\t\t\t\t<h3>expand-right</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"green\" data-style=\"expand-right\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<section class=\"button-demo\">\n\t\t\t\t\t<h3>expand-up</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"green\" data-style=\"expand-up\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<section class=\"button-demo\">\n\t\t\t\t\t<h3>expand-down</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"green\" data-style=\"expand-down\">Submit</button>\n\t\t\t\t</section>\n\n\n\t\t\t\t<section class=\"button-demo\">\n\t\t\t\t\t<h3>contract</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"red\" data-style=\"contract\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<section class=\"button-demo\">\n\t\t\t\t\t<h3>contract-overlay</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"red\" data-style=\"contract-overlay\" style=\"z-index: 10;\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<section class=\"button-demo\">\n\t\t\t\t\t<h3>zoom-in</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"red\" data-style=\"zoom-in\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<section class=\"button-demo\">\n\t\t\t\t\t<h3>zoom-out</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"red\" data-style=\"zoom-out\">Submit</button>\n\t\t\t\t</section>\n\n\n\t\t\t\t<section class=\"button-demo\">\n\t\t\t\t\t<h3>slide-left</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"blue\" data-style=\"slide-left\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<section class=\"button-demo\">\n\t\t\t\t\t<h3>slide-right</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"blue\" data-style=\"slide-right\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<section class=\"button-demo\">\n\t\t\t\t\t<h3>slide-up</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"blue\" data-style=\"slide-up\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<section class=\"button-demo\">\n\t\t\t\t\t<h3>slide-down</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"blue\" data-style=\"slide-down\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<h3 id=\"progress\">Built-in progress bar</h3>\n\n\t\t\t\t<section class=\"progress-demo\">\n\t\t\t\t\t<h3>expand-right</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"purple\" data-style=\"expand-right\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<section class=\"progress-demo\">\n\t\t\t\t\t<h3>contract</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"purple\" data-style=\"contract\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<h3 id=\"sizes\">Sizes</h3>\n\n\t\t\t\t<section class=\"progress-demo\">\n\t\t\t\t\t<h3>Extra Small</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"mint\" data-style=\"expand-right\" data-size=\"xs\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<section class=\"progress-demo\">\n\t\t\t\t\t<h3>Small</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"mint\" data-style=\"expand-right\" data-size=\"s\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<section class=\"progress-demo\">\n\t\t\t\t\t<h3>Large</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"mint\" data-style=\"expand-right\" data-size=\"l\">Submit</button>\n\t\t\t\t</section>\n\n\t\t\t\t<section class=\"progress-demo\">\n\t\t\t\t\t<h3>Extra Large</h3>\n\t\t\t\t\t<button class=\"ladda-button\" data-color=\"mint\" data-style=\"expand-right\" data-size=\"xl\">Submit</button>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</article>\n\n\t\t<script src=\"dist/index-bundle.js\"></script>\n\t</body>\n</html>\n"
  }
]