Enable Striped and Animated Buttons

The disabled state of buttons is handy but it doesn’t provide enough visual notification to dumb users that an action is occurring in the background. The loading JS is okay, but its use seems unnecessary in a lot of cases. Up until now I have used an adjacent .gif which I control along with the disabled state.

Now that we have striped and animated progress bars, however, it would be nice if we could apply those stylings to buttons.

<a href="#" class="btn animated">Normal animated button</a>
<a href="#" class="btn disabled animated">Disabled animated button</a>

edit: <del>I thought this had existed once? Perhaps it was in a pull request that didn’t make it.</del> It was #471. Seems the loading JS was the result but the animation was scrapped at that time.

[cnicodeme]

I did a little working on it, just copied the css from progress-striped, and came with this working solution :

.btn-striped {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  -webkit-background-size: 40px 40px;
  -moz-background-size: 40px 40px;
  -o-background-size: 40px 40px;
  background-size: 40px 40px;
}
.btn-striped.active {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -moz-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}

It’s working and it’s a nice visual return of a submitted/working button.

[davidmurdoch]

Here is some .less markup to generate the loading class for you in Bootstrap 2.0.1:

.btn.loading {
    #gradient > .striped(auto);
    .background-size(40px 40px);
    .progress.active .bar;
}

I also came up with an AJAX activity monitor to auto-wire the animations across an application:

    /*!
     * Globally registered ajax activity monitor
     * 
     * Copyright 2012 David Murdoch <http://davidmurdoch.com>
     * Available under MIT license, <http://www.opensource.org/licenses/mit-license.php>
     */
    (function(){
        // .ajax-activity-iconshould be a hidden element with a loading spinner
        // Teh script below toggles the element's `hidden` class.
        var ajaxIcon = $(".ajax-activity-icon"),
            timer = null,
            counter = 0;
        $(document).ajaxSend(function(e, jqXHR){
            console.log(window.event);
            // get the REAL window event that triggered this mess, if possible
            var event = window.event || e;

            // if the event's target is `a.btn` animate the button
            var target = $(event.target);
            if( target.is("a.btn") ){
                target.addClass("loading disabled");
                jqXHR.always(function(){
                    target.removeClass("loading disabled");
                });
            }

            // if we aren't already showing (or waiting to show) the global
            // ajaxIcon queue it up now.
            if(++counter === 1){
                clearTimeout(timer);
                // Only show the icon if loading takes longer than 400ms.
                // Users have been shown to perceive changes in state as
                // as a sign of progress and may think loading takes
                // less time. "0.4s seemed to be the optimal delay"
                // http://survey.jsfiddle.net/spinner/results/
                timer = setTimeout(function(){
                    ajaxIcon.removeClass("hidden");
                }, 400);
            }
        }).ajaxComplete(function(){
            // hide our global spinner after all queued AJAX calls
            // are complete.
            if(--counter === 0){
                clearTimeout(timer);
                ajaxIcon.addClass("hidden");
            }
        });
    }());