JSFiddle - React, Tailwind, and code Playground

by Victor Stodell

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div style="margin: 50px;">
    <button class="btn btn-primary" data-loading-text="Sparar..." data-saved-text="Sparad">Spara ändringar</button>
</div>

JavaScript

jQuery.fn.extend({
  saveButton: function(args) {
      var btn = $(this);
      switch(args) {
          case 'loading':
              btn.css('width', btn.css('width'));
              btn.attr('disabled', true);
              btn.data('original-text', btn.text());
              btn.text(btn.data('loading-text'));
              break;
          case 'saved':
              btn.attr('disabled', false);
              btn.html('<span class="glyphicon glyphicon-ok"></span> ' + btn.data('saved-text'));
              //btn.removeClass('btn-primary').addClass('btn-success');
              break;
          case 'reset':
              btn.attr('disabled', false);
              btn.text(btn.data('original-text'));
              //btn.removeClass('btn-success').addClass('btn-primary');
              break;
      }
  }
});

$('button').on('click', function(elm) {
    var btn = $(this);
    
    btn.saveButton('loading');
    
    setTimeout(function() {
        btn.saveButton('saved');
        
        setTimeout(function() { 
            btn.saveButton('reset');
        }, 1000);
    }, 500);
});