hakimel / ladda Goto Github PK

View Code? Open in Web Editor NEW

7.9K 7.9K 872.0 345 KB

Buttons with built-in loading indicators.

Home Page: http://lab.hakim.se/ladda/

License: MIT License

JavaScript 53.82% SCSS 46.18%

ladda's People

Contributors

Stargazers

Watchers

Forkers

vsxed benigeri tomekl frytaz agumonkey 99co ealliaume rjayako hyraxx quark-bar brentkuhar diegolanda chender411 mustafaismail22 jtarrinho1978 machito sahlie1985 jaehess zzmjohn tmacam mik-ro aitoroses andyjanes tjoen tinkerwell yufeiliu xiaoshen jaekunchoi kemallette creativelyme davidovich vibster gigo101 geekybeaver michanismus hatpick mojocatplay vishalchaudhary dekaralos smillea lujaw streambo loutlook zuanjo c0mpsc1 renaudleo derekebradley bradparks txedo pixeleate kero-it jag cpennlee nvdnkpr levick jffgrdnr dhawalk bennyshredz rubiwachs michelsik jasonperez drummydummyml zaf187 f2er digitup lymanlai parkerproject anthony-sanchez zero13ro southgabry not-only-code imwiththou abdieffendi gunn xdiverres djoudi itsaryuk hz-labs nevosegal exexzian msoftware sandywu alsitn mdunbavan hieblmedia dokalanyi creativebraininc riamehdi geoxx samfrancisco billyoncetoldme myusernamejeep ganasist nandiraju simboyz arnabc erinther shamithc nileshagnihotri vj-chandera

ladda's Issues

Release [email protected]

As @theodorejb wrote in #77:

Spin.js 3.0 was rewritten as an ES6 module, so Ladda also has to be rewritten as an ES6 module to use it (which is a breaking change). The bulk of this work has already been completed in the 2.x branch (https://github.com/hakimel/Ladda/commits/2.x). However, I've been hesitant to publish a new version based on spin.js 3.0 since it can cause performance issues for certain usage scenarios (e.g. showing a spinner while other code is running). fgnass/spin.js#347 should fix this, but it doesn't work properly in Microsoft Edge, and I'd like to wait until it does.

Maybe we can release an alpha version with the bug indicated as unresolved?
For example, we could use next tag for npm.

Setting button to disabled in Start() prevents form submission in Chrome

FYI ...
If I have the following code in button click handler the button "disabled" property will be set to true. In that case Chrome will no longer submit the form.

ButtonClickHandler(evt){
   this.$ladda = Ladda.create(evt.target);
   this.$ladda.start();
}

In my case re-enabling the button, and then putting code for disabling the button into the form.submit handler worked the best.

v1.0.6: can't resolve spin.js

ladda.min.js has

require("spin.js")

but dist/ includes spin.min.js, not spin.js. For use with Webpacker, this requires adding an alias:

alias: {
  spin: resolve('node_modules/ladda/dist/spin.min.js'
}

v2.0+ only support Typescript？

I am wondering whether Ladda v2.0+ only support Typescript?
Or javascript and jquery are also supported?

TypeError: dep.getResourceIdentifier is not a function

I am getting this error on 1.0.0 building in production my app:

cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
 10% building modules 8/14 modules 6 active …eb/node_modules/ladda/dist/ladda.min.jsTypeError: dep.getResourceIdentifier is not a function
    at addDependency (/var/www/web/node_modules/webpack/lib/Compilation.js:394:30)
    at iterationOfArrayCallback (/var/www/web/node_modules/webpack/lib/Compilation.js:80:3)
    at addDependenciesBlock (/var/www/web/node_modules/webpack/lib/Compilation.js:414:5)
    at Compilation.processModuleDependencies (/var/www/web/node_modules/webpack/lib/Compilation.js:425:4)
    at afterBuild (/var/www/web/node_modules/webpack/lib/Compilation.js:552:16)
    at _this.buildModule.err (/var/www/web/node_modules/webpack/lib/Compilation.js:598:11)
    at callback (/var/www/web/node_modules/webpack/lib/Compilation.js:349:35)
    at module.build.error (/var/www/web/node_modules/webpack/lib/Compilation.js:385:12)
    at handleParseResult (/var/www/web/node_modules/webpack/lib/NormalModule.js:371:12)
    at doBuild.e (/var/www/web/node_modules/webpack/lib/NormalModule.js:393:6)
    at runLoaders (/var/www/web/node_modules/webpack/lib/NormalModule.js:272:12)
    at /var/www/web/node_modules/loader-runner/lib/LoaderRunner.js:370:3
    at iterateNormalLoaders (/var/www/web/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
    at Array.<anonymous> (/var/www/web/node_modules/loader-runner/lib/LoaderRunner.js:202:4)
    at Storage.finished (/var/www/web/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
    at provider (/var/www/web/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
    at /var/www/web/node_modules/webpack/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:447:3)

Timeout value is hard coded at 2000ms

Doh

remove label-button's styles from dist

Why in dist css file you have?

.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
}

Make sure to `tag` versions and follow semver.org

http://semver.org

I've noticed you didn't create a tag for 0.3.0 and 0.4.0 😉

Feature request: Add size variants (twitter bootstrap style)

See headline :)

Syntax error in ladda.js:9

Hello, everyone.

After update Ladda, i got this syntax error bit annoying.

Where is the "dist" folder?

I'm tyring to download Ladda for inclusing in my .NET Core project. Where actually is the "Dist" folder the docs refer to? I can't seem to find the CSS file.

EDIT: It seems ladda only works if you're using Node. Is there any way to use it without the Node.js requirement?

Installing on .Net core ?

How can I install on .Net core? I see ladda in Nuget but when I install it, I cant find /dist or spin.js anywhere.

Thanks

Modal blinking

So, I'm using https://github.com/sachinchoolur/ladda-angular on my project, for button directive with ladda, I'm opening this issue here, because this repo doesn't has a commit for some time.

My problem is that when I use Ladda in a button within a modal, the modal blinks in a strange way.

And without Ladda it just don't blink.

So my question is, can I resolve this by updating Ladda in the ladda-angular project ?

Please add "tested on" in the about page?

I've tryed this on latest chrome, firefox and safari.
Didn't try IE
Would be nice to see a small section that says where it works.

inst.
// Create a new instance of ladda for the specified button var l = Ladda.create(document.querySelector('.my-button')); // Start loading l.start(); // Will display a progress bar for 50% of the button width l.setProgress(0.5); // Stop loading l.stop(); // Toggle between loading/not loading states l.toggle(); // Check the current state l.isLoading(); // Delete the button's ladda instance l.remove();

Hope it can remove class ladda-button in css

Very cool idea. I do very like it.
Hope class ladda-button can be removed, then it will be more generic. And can be easily used in other UI framework.

Downloaded zip version not working

demo of Ladda works on https://lab.hakim.se/ladda/ but the copy I downloaded (the zip file) but I'm having trouble getting it to work - I'm using the same browser in each case.

On the downloaded copy of the demo the spinner does not appear, the submit button takes me immediately to example.com.

I noticed that the css filenames mentioned in README.md do not match those in the css directory and 'dist' does not exist, so I created it and downloaded ladda.min.css, ladda.min.js and spin.min.js into it. Looks like I'm not supposed to down load form-bundle.js though.

bower install angular-ladda

Bower install angular-ladda is listing ladda as a dependency, but after downloading it it's not given the dist folder for ladda. Any ideas?

Please add dist or documentation how to use with webpack bundles!

I want to use Ladda in my project but I can not get it running. When using npm package and importing with webpack, there is no global namespace Ladda after running webpack. Tried to transpile it in own package with OutputLibrary option, but still no success.

I would be very happy if there was a pre-transpiled and minimize ladda.min.js with all needed dependencies and an ladda.min.css which can be used out-of-the-box.

Not everyone is using webpack or similiar and even when using webpack it is not straight forward to use :-(

parsley novalidate problem

<html>
<body>
<form method="post" action="index.php" novalidate>
<input required data-parsley-length="[11,11]" data-parsley-type="number" type="text" id="cacel" name="cacel" class="form-control" placeholder="please cacel entery" value="">
<button type="submit" class="ladda-button btn btn-sm btn-blue" data-style="zoom-in"><i class="mdi mdi-content-save"></i> Save</button>
</form>
<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

<!-- Loading buttons js -->
<script src="assets/libs/ladda-buttons/js/spin.min.js"></script>
<script src="assets/libs/ladda-buttons/js/ladda.min.js"></script>
<script src="assets/libs/ladda-buttons/js/ladda.jquery.min.js"></script>

</body>
</html>

parsley chopping does not occur.
But he's still running on the ladda.
ladda should not work.

Success Method after loading

Very interesting and amazing concept. Would be perfect if add a method of success (at the end of progress show successful label or icon) before back for the initial button label.

Document Ladda.bind() form validation behavior

Ladda is awesome, thanks for this tool. You should add to the README that if we bind Ladda to submit button it has no effect until the form is valid.

Does not show any spinner

Version - 1.0.4 from npm

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/ladda/dist/ladda.min.js"></script>
    <script src="node_modules/ladda/dist/spin.min.js"></script>
    <link rel="stylesheet" href="node_modules/ladda/dist/ladda-themeless.min.css">
</head>
<body>
<button class="ladda-button" data-style="expand-right"><span class="ladda-label">Submit</span></button>
</body>
</html>

All assets are loaded, I see button and it does not display any spinner on click:

What am I doing wrong?

Unexpected token import

I have tried to import Ladda into Electron app with Vue and webpack. I have got this error message.

Uncaught SyntaxError: Unexpected token import
    at createScript (vm.js:80)
    at Object.runInThisContext (vm.js:139)
    at Module._compile (module.js:606)
    at Object.Module._extensions..js (module.js:653)
    at Module.load (module.js:561)
    at tryModuleLoad (module.js:504)
    at Function.Module._load (module.js:496)
    at Module.require (module.js:586)
    at require (internal/module.js:11)
    at eval (external "ladda"?71f1:1)

How to fix this bug

button.ladda( 'isLoading' ) returns button object instead of loading state

When using the jquery version of your script, isLoading returns the button object instead of a boolean loading state value. The normal javascript version works just fine.

Reproduce with:

// Create a new instance of ladda for the specified button
var l = $( '.my-button' ).ladda();

// Check the current state
l.ladda( 'isLoading' );

Uncaught SyntaxError: Unexpected token import

import * as Ladda from 'ladda';

how can i import ladda in electron app ?

style name conflicts

Love this script! This is just a suggestion to make things more compatible with other css frameworks. I actually tweaked the css to change the style names from .label and .spinner to .ladda-label and .ladda-spinner.

The main issue for me is that "label" style conflicts with Bootstrap and so it made the button text kinda weird.

Update 2.0.3 npm build failure

I'm posting a new issue as I did not receive any feedback on the comment I made in this closed issue: #109

Is there a way to support both node.js and Dart Sass? When building our application we get the following error after the above change was made in v2.0.3:

Module build failed: ModuleBuildError: Module build failed: 
        right: math.div($spinnerSize, -2) + 10;
                  ^
      Invalid CSS after "...    right: math": expected expression (e.g. 1px, bold), was ".div($spinnerSize, "
      in <redacted>node_modules/ladda/css/ladda.scss (line 118, column 20)

Support spin.js 3.1.0

Upgrade dependency to spin.js 3.1.0 and support it

style passed in during bind

Amazing library. Silly question, can style be defined during bind? I have a ton of buttons and I want them all styled the same way. So I am trying to define style during bind and it doesn't seem to work, it seems to default still to expand-right.

Ladda.bind('button.ladda-button', {timeout: 2000, style: "zoom-in"});

If style during bind doesn't work, then this is an enhancement request.

Thanks!

Dart Sass complains about usage of / for division in ladda.scss

I see messages like the below when using ladda in an Angular 12 application with Dart Sass:

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spinnerSize, -2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
116 │         right: $spinnerSize/-2 + 10;
    │                ^^^^^^^^^^^^^^^
    ╵
    node_modules\ladda\css\ladda.scss

Could we follow their recommendation and use math.div() instead?

Add spin.js as dependency in package.json

Something like this:

"dependencies": {
  "spin": "~1.3.0"
},
"volo": {
  "url": "https://raw.github.com/hakimel/Ladda/{version}/js/ladda.js",
  "dependencies": {
    "spin": "fgnass/spin.js/~1.3"
  }
},

From where can I get /dist directory?

Hi,
From where can I get dist directory with compiled version of ladda? I want use it in my PHP application but I can't /dist directory with newest version.

2.0.x releases don't have `dist` folder

Newer releases (from v2.0.0) don't have dist folder. Demo doesn't work because of this.

Spinner not spinning

The issue is that I can see the spinner when I do this:

var l = Ladda.create(document.querySelector('.ladda-button')); l.start();
but it doesn't spin at all. Tried to remove all CSS to rule out CSS conflicts.

Using Laravel.

XSS vulnerability in third-party library

By relying on spin.js, ladda is also not compliant with strict CSP (Content Security Policy). See: fgnass/spin.js#115

Including ladda.js before spin.min.js causes an error

The readme should specify the order of inclusion to avoid this error.

going to do a pull request.

show full integration examples

I love these buttons and I'm trying to drop them into my project but they're only partly working. Some guidance on what I need to do in terms of markup and css classes would be really helpful.

Add bundling hints to the README?

Greets team Ladda. It's mentioned in the README.md that it’s "recommended to use a bundler such as Rollup, Parcel, or Webpack to create a production-ready code bundle."

For someone that's:

never used Rollup.js before, but found webpack to be painful
really likes Ladda, but needs to use it on an oldschool LAMP site

... hitting a dead end like that stunk — just not as much as the thought of diving back down the webpack docs hole.

To help future Ladda users that find themselves in a similar situation — wanting to use the latest version instead of an outdated fork, and being stuck (for now) under an aging LAMP — I dropped in (thread jacked ... long story) a HOWTO over here.

The important bits are:

Transpile Ladda:

rollup --name Ladda --globals spin.js:Spin --input ladda.js --format iife --file ladda.iife.js

Transpile the Ladda dependency, Spin.js:

rollup --silent --name Spin --input spin.js --format umd --file spin.umd.js

... And you're done! The rest of the documented Ladda magic works great!

Would you guys be willing to drop a bundler example, like the two rollup cli lines above, into the README.md? ... Or would you accept a PR?

Look on the bright side, with any luck we won’t need bundlers soon!?

Thanks for considering this guys.

-Dan

If you set custom padding, it will broke the button.

You can check and in your examples. If you set for the example padding: 14px 18px; to the expand-right it will be broken.

Not working if form has novalidate attribute

I use the bind method :

Ladda.bind('button[type=submit]');

and the ladda button is not working if the form has the novalidate attribute, even if the form is actually validated.

Is it a bug ? or am I missing somehting ?

"Uncaught ReferenceError: Spinner is not defined".

I moved minified spin.js section its own file along with ladda.js in a same directory. Used RequireJS, backbone and bootstrap with ladda, however encounter above error.

RequireJS and shim'ed ladda:

require.config ({
   paths: {
            //jquery, underscore, backbone here
            spin : 'libs/ladda/spin',
            ladda: 'libs/ladda/ladda'
   },

   shim: {
        ladda: {
            deps: ['spin'],
            exports: 'Ladda'    
    }
}
});

In backbone view:

define([
  'jquery',
  'underscore',
  'backbone',
  'bootstrap',
  'spin',
  'ladda',
 ], function($, _, Backbone, Bootstrap, Spinner, ladda){
    render: function () {
        //templating

        console.log ('Spinner: ' + typeof Spinner);
        Ladda.create ($('button'));    
   }
});

I could see typeof Spinner has got function being loaded.

How do I make Spinner visible to Ladda.create ()? Appreciate any advice render. Thank you.

CSS transition collision with bootstrap 4

Hi,

I am using this library with bootstrap v4.0.0-beta.2 and I notice collision in CSS transition style.

B4:

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

Ladda:

.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;
}

This collision cause very ugly behavior of background-color/color style on hover. Is it possible to remove !important or set transition only for width, height etc. styles for .ladda-button? Or something similar which solve this issue.

Thanks,
Dan

Vite Error: ReferenceError: exports is not defined

1:18:03 AM [vite] Error when evaluating SSR module /@fs/home/user/work/web/src/ladda.js:
/home/home/work/web/node_modules/.pnpm/[email protected]/node_modules/ladda/js/ladda.js:9
 import {Spinner} from 'spin.js';
 ^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:353:18)
    at wrapSafe (node:internal/modules/cjs/loader:1039:15)
    at Module._compile (node:internal/modules/cjs/loader:1073:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at nodeRequire (/home/brian/work/menus/menus-angular-2-app/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-11db14da.js:73337:17)
    at ssrImport (/home/brian/work/menus/menus-angular-2-app/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-11db14da.js:73290:20)

Form validation

Hello,

I'm using Ladda 1.0.6 inside forms, but it seems that form validation is not taken into account.

If there are only input text, it's ok, Ladda won't launch until the form is valid, but if there's selects, radio button or anything else Ladda will trigger even if the form is not valid.

Note : I can have multiple forms on the page. I bind the buttons with :
Ladda.bind( 'button[type=submit]' );
My forms do not have the novalidate attribute.

Thanks.

Where's the dist folder?

Can't find the dist folder in the zip downloaded from releases

Not working on Safari after form submit with page reload

Using Safari 11.0.1 / macOS High Sierra

I've been having issues with Ladda lately in Safari, so I created the following page to test, keeping it as simple as possible. Ladda does not work; no spinner...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.5/ladda.min.css" rel="stylesheet">
</head>
<body>
    <form method="POST">
        <button type="submit" class="ladda-button" data-style="zoom-in">
            Submit
        </button>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.5/spin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.5/ladda.min.js"></script>
    <script>
        Ladda.bind( 'button[type=submit]', { timeout: 2000 } );
    </script>
</body>
</html>

I tried the following Javascript too with the same result: no spinner

$('form').submit(function (e) {
    var l = Ladda.create(document.querySelector('.ladda-button'));
    l.start();
});

StopAll() removes disabled from non-loading buttons

StopAll should only stop buttons that are loading.

Otherwise, buttons disabled for other reasons become enabled.

Ladda button and validator

Hello, I'm working with Ladda buttons for my ASP.Net webforms application. So far they are working perfectly with one only detail.

Suppose that I have a textbox with one validator. I also have a button which will implement the Ladda appearance when clicked. Suppose that I click the button and the validator triggers responding that the textbox is invalid. In this case the the button continues to display the spinner.

Any Idea on how to approach that scenario specifically for ASP.Net webforms will be appreciated.

thank you in advance

Adrian

Unable to load with webpack

Hi, I'm unable to get webpack to generate appropriate .js files.

I've added to package.json the following:

  "dependencies": {
    "grunt-webpack": "^3.1.3",
    "webpack": "^4.23.1"
  }

I've added to Gruntfile.js the following:

const path = require('path');

module.exports = function(grunt) {
        grunt.initConfig({
                pkg: grunt.file.readJSON('package.json'),
                webpack: {
                        dist: {
                                entry: {
                                        'spin':  path.resolve(__dirname, 'src/spin.js'),
                                        'ladda': path.resolve(__dirname, 'src/ladda.js')
                                },
                                output: {
                                        filename: '[name].min.js',
                                        path: path.resolve(__dirname, 'dist'),
                                        publicPath: "/static/"
                                }
                        }
                }
        });
        grunt.loadNpmTasks('grunt-webpack');
        grunt.registerTask('default',['webpack']);
}

File src/spin.js contains import {Spinner} from 'spin.js';

File src/ladda.js contains import * as Ladda from 'ladda';

I then run the grunt command.

My browser is successfully loading both /static/spin.min.js and /static/ladda.min.js.

If I try to reference Ladda from in-page JS, I get a JS error Ladda is not defined.

The only reference to Ladda in the generated dist/ files is in the copyright comment.

The contents of dist/ladda.min.js are:

!function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/static/",n(n.s=2)}([function(t,e,n){"use strict";n.d(e,"a",function(){return o});var r=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},i={lines:12,length:7,width:5,radius:10,scale:1,corners:1,color:"#000",fadeColor:"transparent",animation:"spinner-line-fade-default",rotate:0,direction:1,speed:1,zIndex:2e9,className:"spinner",top:"50%",left:"50%",shadow:"0 0 1px transparent",position:"absolute"},o=function(){function t(t){void 0===t&&(t={}),this.opts=r({},i,t)}return t.prototype.spin=function(t){return this.stop(),this.el=document.createElement("div"),this.el.className=this.opts.className,this.el.setAttribute("role","progressbar"),s(this.el,{position:this.opts.position,width:0,zIndex:this.opts.zIndex,left:this.opts.left,top:this.opts.top,transform:"scale("+this.opts.scale+")"}),t&&t.insertBefore(this.el,t.firstChild||null),function(t,e){var n=Math.round(e.corners*e.width*500)/1e3+"px",r="none";!0===e.shadow?r="0 2px 4px #000":"string"==typeof e.shadow&&(r=e.shadow);for(var i=function(t){for(var e=/^\s*([a-zA-Z]+\s+)?(-?\d+(\.\d+)?)([a-zA-Z]*)\s+(-?\d+(\.\d+)?)([a-zA-Z]*)(.*)$/,n=[],r=0,i=t.split(",");r<i.length;r++){var o=i[r],s=o.match(e);if(null!==s){var a=+s[2],l=+s[5],u=s[4],d=s[7];0!==a||u||(u=d),0!==l||d||(d=u),u===d&&n.push({prefix:s[1]||"",x:a,y:l,xUnits:u,yUnits:d,end:s[8]})}}return n}(r),o=0;o<e.lines;o++){var u=~~(360/e.lines*o+e.rotate),d=s(document.createElement("div"),{position:"absolute",top:-e.width/2+"px",width:e.length+e.width+"px",height:e.width+"px",background:a(e.fadeColor,o),borderRadius:n,transformOrigin:"left",transform:"rotate("+u+"deg) translateX("+e.radius+"px)"}),p=o*e.direction/e.lines/e.speed;p-=1/e.speed;var c=s(document.createElement("div"),{width:"100%",height:"100%",background:a(e.color,o),borderRadius:n,boxShadow:l(i,u),animation:1/e.speed+"s linear "+p+"s infinite "+e.animation});d.appendChild(c),t.appendChild(d)}}(this.el,this.opts),this},t.prototype.stop=function(){return this.el&&("undefined"!=typeof requestAnimationFrame?cancelAnimationFrame(this.animateId):clearTimeout(this.animateId),this.el.parentNode&&this.el.parentNode.removeChild(this.el),this.el=void 0),this},t}();function s(t,e){for(var n in e)t.style[n]=e[n];return t}function a(t,e){return"string"==typeof t?t:t[e%t.length]}function l(t,e){for(var n=[],r=0,i=t;r<i.length;r++){var o=i[r],s=u(o.x,o.y,e);n.push(o.prefix+s[0]+o.xUnits+" "+s[1]+o.yUnits+o.end)}return n.join(", ")}function u(t,e,n){var r=n*Math.PI/180,i=Math.sin(r),o=Math.cos(r);return[Math.round(1e3*(t*o+e*i))/1e3,Math.round(1e3*(-t*i+e*o))/1e3]}},,function(t,e,n){"use strict";n.r(e);n(0);
/*!
 * Ladda
 * http://lab.hakim.se/ladda
 * MIT licensed
 *
 * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
 */}]);