JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<a href="#" class="btn" data-active="active..." data-loading="loading..." >Save!</a>
CSS
a.state-loading{
font-style: italic;
}
JavaScript
$.fn.state = function(state) {
var d = 'disabled'
return this.each(function () {
var $this = $(this);
$this[0].className = $this[0].className.replace(/\bstate-.*?\b/g, '');
$this.html( $this.data()[state] )
state == 'loading' ? $this.addClass(d+' state-'+state).attr(d,d) : $this.removeClass(d).removeAttr(d)
})
}
$('.btn').click(function(){
var $this = $(this);
$this.state('loading');
setTimeout(function(){
$this.state('complete');
}, 3000);
});