Loading state button with Bootstrap buttons

fiddle.css

$easing: cubic-bezier(0.6,0.15,0.4,0.85);
$timing: 250ms;
$offset: 2em;
$line-height-btn-base: 2.3;
$line-height-btn-xs: 1.5;

.btn-inner {
    display: block;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: $timing $easing;    
    transition: $timing $easing;    
}

.btn-inner-pending {
    bottom: 0;
    left: 0;
    line-height: $line-height-btn-base;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    -webkit-transform: translateY(-$offset);
    transform: translateY(-$offset);
    -webkit-transition: $timing $easing;
    transition: $timing $easing;

    .btn-xs & {
        line-height: $line-height-btn-xs;
    }
}

.btn { 
    overflow: hidden;
    position: relative;
    
    &.is-pending {
        -webkit-animation: none;  
        animation: none;  
            
        .btn-inner {
            -webkit-transform: translateY($offset);
            transform: translateY($offset);

        }
            
        .btn-inner-pending {
            -webkit-animation: pulse ($timing * 3) $easing $timing infinite alternate;
            animation: pulse ($timing * 3) $easing $timing infinite alternate;
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }
}

@-webkit-keyframes pulse { 
    from { opacity: 1; } 
    to {   opacity: .25; }  
}

@keyframes pulse { 
    from { opacity: 1; } 
    to {   opacity: .25; }  
}

fiddle.html

<h1>Loading state button with Bootstrap</h1>
<dl>
    <dt>Default button</dt>
    <dd>
        <button class="btn btn-default" type="button">
            <span class="btn-inner">Load more</span>
            <span class="btn-inner-pending">Loading…</span>
        </button>                
    </dd>
    <dt>Different button types</dt>
    <dd>
        <button class="btn btn-primary" type="button">
            <span class="btn-inner">Primary</span>
            <span class="btn-inner-pending">Loading…</span>
        </button>&emsp;  
        <button class="btn btn-success" type="button">
            <span class="btn-inner">Success</span>
            <span class="btn-inner-pending">Loading…</span>
        </button>&emsp;   
        <button class="btn btn-info" type="button">
            <span class="btn-inner">Info</span>
            <span class="btn-inner-pending">Loading…</span>
        </button>&emsp;          
        <button class="btn btn-warning" type="button">
            <span class="btn-inner">Warning</span>
            <span class="btn-inner-pending">Loading…</span>
        </button>&emsp;  
        <button class="btn btn-danger" type="button">
            <span class="btn-inner">Danger</span>
            <span class="btn-inner-pending">Loading…</span>
        </button>                
    </dd>
    <dt>Different button sizes</dt>
    <dd>
        <p>
            <button class="btn btn-default btn-lg" type="button">
                <span class="btn-inner">Large button</span>
                <span class="btn-inner-pending">Loading…</span>
            </button>
        </p>
        <p>  
            <button class="btn btn-default" type="button">
                <span class="btn-inner">Default button</span>
                <span class="btn-inner-pending">Loading…</span>
            </button>
        </p>
        <p>
            <button class="btn btn-default btn-sm" type="button">
                <span class="btn-inner">Small button</span>
                <span class="btn-inner-pending">Loading…</span>
            </button>
        </p>
        <p>
            <button class="btn btn-default btn-xs" type="button">
                <span class="btn-inner">Extra small button</span>
                <span class="btn-inner-pending">Loading…</span>
            </button>                
        </p>
    </dd>
    <dt>Block button</dt>
    <dd>
        <button class="btn btn-default btn-block" type="button">
            <span class="btn-inner">Block button</span>
            <span class="btn-inner-pending">Longer loading text…</span>
        </button>                
    </dd>
</dl>

fiddle.js

$('.btn').on('click', function () {
    var $this = $(this);

    $this
        .toggleClass('is-pending')
        .prop('disabled', true)
    ;
    // custom callback
    setTimeout(function () {
        $this
            .toggleClass('is-pending')
            .prop('disabled', false)
        ;
    }, 3000);
});

fiddle.manifest

name: Loading state button with Bootstrap
description: Loading state button with Bootstrap
authors:
  - Christian Angermann
resources:
  - https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css
  - https://code.jquery.com/jquery-latest.min.js
normalize_css: no
wrap: b
panel_js: 0
panel_css: 1

Demo on http://jsfiddle.net/gh/gist/library/pure/529dac190d822c5ddb5f/