data-style="zoom-in" not working in example

[megawubs]

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>

[boatmeme]

Any chance you're using Bootstrap 3.2.0? I've only been able to get the expand-* styles to work with this version of Bootstrap. Seems like the 3.2.0 spec for the 'disabled' class has broken something.

[megawubs]

No, i'm using 3.1.1 if i'm correctly. Will check later to be sure.

[SlowburnAZ]

boatmeme:
I can confirm this, too... only the expand-* styles work in Twitter Bootstrap 3.2. Hopefully this can be fixed soon.

[mbignold]

For me it had to do with the opacity of the button being less than one, which made the spinner not show at all for some reason..

If I set the main <button class=btn> element style to: opacity:1; then it solved the problem and worked consistently. Or you can remove the line in buttons.less in bootstrap that sets the opacity on a [disabled] button, and set custom colours for background and border etc instead of changing opacity.

This works, but obviously with the drawback of not appearing disabled:

<div class="btn-group btn-group-justified" id="rsvp-buttons">
                    <div class="btn-group">
                        <button id="iCome" style="opacity:1" 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" style="opacity:1" 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>

[sotarules]

I confirm that zoom-in data style doesn't work right on certain browsers, particularly Chrome (Version 48.0.2564.116 m), and that setting the opacity to 1 circumvents the problem. I believe that this used to work, but in my case, it suddenly stopped working, very likely due to a change in Chrome (maybe 6 months ago).

When I press a Ladda-enabled button on Chrome 48.0.2564.116m:

• The button text disappears
• The button appears empty
• When the process ends, the button text reappears

During the process, the spinner never appears.

This CSS coding circumvented the problem:

.ladda-button {
    opacity: 1 !important;
}