Last active
August 29, 2015 14:25
-
-
Save cange/529dac190d822c5ddb5f to your computer and use it in GitHub Desktop.
Loading state button with Bootstrap buttons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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; } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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>  | |
<button class="btn btn-success" type="button"> | |
<span class="btn-inner">Success</span> | |
<span class="btn-inner-pending">Loading…</span> | |
</button>  | |
<button class="btn btn-info" type="button"> | |
<span class="btn-inner">Info</span> | |
<span class="btn-inner-pending">Loading…</span> | |
</button>  | |
<button class="btn btn-warning" type="button"> | |
<span class="btn-inner">Warning</span> | |
<span class="btn-inner-pending">Loading…</span> | |
</button>  | |
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$('.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); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Demo on http://jsfiddle.net/gh/gist/library/pure/529dac190d822c5ddb5f/