Sorry that I found that the version field in package.json is v0.8.0, but there is no v0.8.0 release and tag, is that correct? thanks.

Could you make release 0.2.0 for update Ladda 0.9.4?

I'm using bootstrap 3.2. Facing an issue for a specific button in my page. It always showing very small spinner. It looks like a dot (.). But animation is working perfectly.

And I have used ladda-bootstrap button one more place in my web page but there it is working fine.

<button class="btn btn-lg btn-primary ladda-button start-shopping" data-style="zoom-out" data-size="l">Start Shopping</button>

This is how I start and stop

startShopping = Ladda.create($(".start-shopping")[0]);
startShopping.start();
startShopping.stop(); //This line is after exicution

Initially I have applied some custom styles to that button but later I removed and tried but faced the same issue.

See initial problem description in #53

The main problem is that btn-default has a white background,
see JSFiddle: https://jsfiddle.net/terales/5v2v0mgL/1/

What could be a solution?
Should we adjust a color of spinner in this case?

Hey there - all of a sudden the ladda buttons in my projects began disappearing once clicked.

I though I was going crazy, or there was something in particular I was doing to cause the issue - but then I visited the demo site for this project and the same issue is happening there: http://msurguy.github.io/ladda-bootstrap/

This issue does not seem to exist on the original ladda button project demo site: http://lab.hakim.se/ladda/

Any clue as to what is causing this - or how to fix it? Thanks.

Hi thanks for the cool plugin!

When trying to show the 'loader' on a button inside a modal the loader is very tiny.

See example:

http://jsfiddle.net/KyXW8/

Thanks! :)

(guessing this also has to do with the version thats not up to date with Ladda as in issue #15)

Selectpicker (developer.snapappointments.com/bootstrap-select) selection are not visible if i use Ladda.js

@msurguy I think it would be easier to get info about the project and demo if you:

• add description to the tagline instead of copyright,
• add link to demo the the top field,
• add relevant topics.

See an example:

This is a very clever UI design -- well done!

I noticed the ladda-button stays disabled indefinitely once clicked. So if you submit a form by clicking a ladda-button, and then navigate back to the page with the form, the button is still disabled. It seems the only way to enable the button is to refresh the page.

down vote
favorite
I want to use Ladda with Bootstrap and when click on my submit button the button is expanding to the left, but the spinner is not showing.

I am using Laravel.

I have included the css file in my head:

   {!! Html::style('css/plugins/ladda-themeless.min.css') !!} 

And I also included both js files at the end of the page.

   {!! Html::script('js/plugins/spin.js') !!}
   {!! Html::script('js/plugins/ladda.js') !!}

After that I bind the input submit

  <script>
    Ladda.bind( 'input[type=submit]' );
    </script>

This is my submit button:

  {!! Form::submit('Register', ['class' => 'btn btn-primary ladda-button', 'data-style' => 'expand-left']) !!}

As I said at the top. It seems to be working. When I click my submit button the button expands to the left side and I disabled, but the Spinner is missing.

Can you help me?

Before I ask my first question - I'm confused: is this a separate library from hakim's and are they both being separately maintained? What is the difference between the two? I noticed I couldn't submit an issue to hakim's ladda github (leads me to believe it's no longer maintained?)

Onto the question.

I have a table which is enclosed in a bootstrap accordion. The accordion starts off unopened, but there is a ladda button enclosed in the table (which is in the accordion) which is therefore hidden/not visible. When I instantiate the Ladda button, open the accordion, and then press the button, the button operated, but the loading spinner is no longer a spinner, it is just a dot.

JSFiddle here: http://jsfiddle.net/mmuelle4/tpkjwa1y/

just reporting a possible issue.
if you take a look at the demo for the progress bar buttons,
you'll see the button element looks like this:

<button class="btn btn-danger ladda-button" data-style="expand-right">
<span class="ladda-label">expand-right</span>
<span class="ladda-spinner"></span>
<span class="ladda-spinner"></span>
</button>

if I manually remove one of the ladda-spinner elements it still seems to work fine.
is the extra element intended?

I'm getting bower errors when trying to install ladda-bootstrap. The only version that bower can see is 0.1.0, it can't see 0.8.0. I've tried both "bower install ladda-bootstrap" and "bower install https://github.com/msurguy/ladda-bootstrap" and it can still only see 0.1.0 despite the fact that your bower.json looks correct. Is this a bower issue or do you need to add a 0.8.0 tag for bower to see it?

I need to use:

Ladda.create( $(this) );

instead of this:

Ladda.create( document.querySelector( '.my-button' ) );

Uncaught TypeError: a.querySelector is not a function

Need a new release that contains the common js support. Also the ladda.js in the dist directory for commonjs part of the UMD does not include the require for spin.js. AMD one does though.

I have been having this issue with my project where all of the spinner within bootstrap modal become really small (nearly invisible).

Based on the examples, it lookes like the Ladda effect can be achieved simply by including the correct CSS and JS files and then defining a Ladda button in HTML. However, regardless of what I do the Ladda effects never happen unless I programatically perform a Ladda.bind().

Is this the required usage of Ladda or do I have something else going on? I notice on the demo page there is a JS script tag that contains the following:

// Bind normal buttons
Ladda.bind( 'div:not(.progress-demo) button', { timeout: 2000 } );

This makes me think that even the normal buttons must have a Ladda.bind(). If this is the required functionality for getting the Ladda effect, then it could be made much more obvious on the demo and github pages...

Just wanted to know if the original developer is still around as I'd like to use this library in my project but it is severely outdated.

Would like to see some love given to this project.

Cheers

TypeError: Spinner is not a constructor

Using latest from dist, exact copy of ajax form example from http://msurguy.github.io/ladda-bootstrap/

Please update your package at nuget.org
https://www.nuget.org/packages/ladda-bootstrap/

Thank you!

Hi,
I've see that the span.ladda-spinner is created every time the button is pressed. So if you click more than once, you have lot of unused elements.
tested on chrome 38.0.2125.104 m
thanks

I'm pretty new to Bootstrap as well as Bower. When I tried to run
$ bower install ladda-bootstrap
inside of my existing setup of https://github.com/BoilerplateMVC/Backbone-Require-Boilerplate
then it tried to grab the vanilla bootstrap because Backbone-Require-Boilerplate != backbone in bower.json :

"dependencies": {
    "bootstrap": ">=3.0.0",

Perhaps this should be resolved in the package.json file within Backbone-Require-Boilerplate but I am not familiar enough with it to determine this.

I have a comment form that is implemented as a ladda button but that button is hidden initially. Once the user focuses on the input field then I display the button. The user will then enter a comment, click the button and the spinner does not show up. I just get a button that looks like the animation is working except that the spinner does not show up.

I assume the reason is because the button is hidden initially since all the other implementations of the button work fine when it's visible initially.

Do you have any suggestions on how to fix this? I would assume, if I can get the width and height of the button before its hidden then the spinner knows what size it should be and then the spinner would display but I don't want to mess with the core files.

Please let me know what I can do.

Thanks.

In order to display the spinner at center you must set '50%' to the 'top' and 'left' properties.

return new Spinner({
        color: spinnerColor || "#fff",
        lines: lines,
        radius: radius,
        length: length,
        width: width,
        zIndex: "auto",
        top: "50%",
        left: "50%",
        className: ""
    });

By default the value is in 'auto' and the spinner is showing bad

Great git!!!! What would I need to get this to work with bootstrap 2.3.2?

Thanks in advance.

I'm trying to use Ladda and when I trigger it, I get the error:
Uncaught TypeError: Object [object Object] has no method 'querySelector' ladda.min.js:8

Using the latest from dist

The following html doesn't show a spinner when using the 'zoom-in' effect. When I delete all the bootstrap btn* classes the spinner shows on a non styled button. The spinner shows with the expand-left effect. I have not tested other effects.

<div class="btn-group btn-group-justified" id="rsvp-buttons">
                    <div class="btn-group">
                        <button id="iCome" class="btn btn-primary ladda-button btn-lg" data-style="zoom-in" data-guest="{{ $guest->id }}" data-coming="{{ $guest->coming }}">
                            <span class="ladda-label">Ik kom! :)</span>
                        </button>
                    </div>
                    <div class="btn-group">
                       <button id="iDontCome" class="ladda-button btn btn-info btn-lg" data-style="zoom-in" data-guest="{{ $guest->id }}" data-coming="{{ $guest->coming }}">
                            <span class="ladda-label">Ik kan helaas niet :(</span>
                        </button>
                    </div>
                </div>

Hello,

I like you to write a tool (Ladda),

But I met a doubt in use,

I found that when using Ajax to submit the form, in the request after the start, I button animation is not working, at the end of a request, this button animation to begin the work, but I'm asking before it has been *.start, so I want to know why he didn't work.

This is my code fragment:

I'm a bit new to bower. But when I try to specify the 0.8.0 dependency I get an error saying there is no tag. If I use 'master' as the version bower will install. Should there not be a git tab for the bower version?

Just tested how current version of the original Ladda works with Bootstrap and found that it works really well:

https://jsfiddle.net/terales/p3efcqw7/

@msurguy what do you think about adding deprecation messages, close issues and navigating people to the original Ladda?

Hello - I have started using the ladda-button, but without embedding in a form. Is there a way to overcome the problem with the button being disabled when navigating back to the page.

Thanks for your help.

PS. I posted this originally on a closed problem (#2) - sorry about that!

in the amd loader ladda.min doesnt point to spin.min.
and it always tries to load from the root instead of relative.

for me I needed to modify what is in ladda.js line 5:
define([ "vendor/ladda-bootstrap/spin.min" ], factory);

perhaps the docs should me amended too. From the documentation I had initially assumed I needed something like this in my define:
'vendor/ladda-bootstrap/spin.min',
'vendor/ladda-bootstrap/ladda.min'

but If I do this it fails because ladda.min cant load 'spin' from the root folder.

are you merging ladda from original repo?

When creating a Ladda via the query selector:

var l = Ladda.create( document.querySelector( '#my-submit-btn' ) );

The spinner is tiny and barely visible. Most likely because it is not able to determine the height of the button.

When creating the Ladda using "var l = Ladda.create(this);" it works fine

There's a reference to Bootstrap CSS over HTTP, which breaks when visiting the page at https://msurguy.github.io/ladda-bootstrap/ in Chrome/Blink-based browsers. Blink blocks mixed content completely.

I'm using a ladda button in a bootstrap panel header to refresh data in an enclosed table. Clicking on the panel header will open/collapse the panel, but I don't want that to happen if the user clicks the ladda button.

http://jsfiddle.net/mmuelle4/x6c506s6/

Catching the click event and stopping the propagation of the event works if the button is in its normal state, but if the ladda button is loading, the click event is no longer captured.

I understand the reason for the functionality -- the button click event handler isn't called because the button is loading. But - is there an event that can be registered for ALL button clicks (including while loading)?

I believe that spin.js is creating a dom object with inline style attributes. Is it possible to do this some other way? I would like to avoid all inline style attributes on my site, but it appears that ladda wont allow me to do that.

I have a login form with block submit button (using BS3).
If the form has validation errors, the spinner "shifts".
Is there any way to prevent this?

I would like to create ladda-bootstrap on Meteor JS Package.
But get error

Uncaught ReferenceError: Ladda is not defined

Please add a prefix to your SCSS variables.
Like $spinnerSize .. should be like;

$ladda-spinnerSize: 32px !default;

or even better $ladda-spinner-size (more like Bootstrap itself)

Also applicable for the theme file (colors etc).

Besides that; use Bootstrap variables too, with !default, like

$ladda-color-blue: $brand-primary !default;

And maybe even better to use bootstrap colors and names instead of something from yourself ;-)

After all; it's really a great addon for Bootstrap.
I use it for modal submit buttons which is working great!

There one issue with die IE8

SCRIPT87: Invalid argument.
ladda.min.js, line 8 character 1431

Ladda has a jQuery-supported version. Would be nice to include that as well. I will likely have some time over the next week to create a PR for this if welcome.

I updated to Bootstrap 3.3 using Nuget in visual studio. This caused the spinner to be offset incorrectly.

To fix it I removed the margin-top and margin-left attributes in the CSS for "slide-right".

Hello !

On expand-left / expand-right buttons, the outline is not completly fabulous, as you can see on joined capture.

We don't have the issue with slide-left / slide-right because of the following code

.ladda-button[data-style="slide-left"] {
    overflow: hidden;
}

Is there any good reason not to write this removing [data-style=...] ? I tried it on demo page and it seems to work fine.

.ladda-button {
    overflow: hidden;
}

can you add this plugin to http://bower.io/ ?

Why package managers?

Today default way of managing web front-end dependencies is through package managers.
This project is very tightly connected to the Bootstrap and maybe Ladda, so it might be a good idea to have this dependencies in a manageable way.

Pros:

• we can setup bots to inform us about new releases in dependencies, so it would be easier to stay up to date
• it would be easier to switch to a modular and testable design
• we would be able to clearly separate project codebase from external dependencies.

Why yarn over npm?

Bootstrap 4 is coming to the release so eventually we would end up supporting two versions.

To make our life easier we should use yarn, as it have this functionality out of box:
mui/material-ui#7195 (comment)

@msurguy could I proceed to implementation of this idea or you have any concerns about it?