JSFiddle - React, Tailwind, and code Playground

by KevinFarrugia

HTML

<ul><li><input type="submit" value="Submit" class="incredible-button" transition="slide-right" /></li></ul>

CSS

a.buttonLink, input[type='submit'] {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  display: inline-block;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  background: #00acde;
  padding: 1em 1.25em;
  border: 6px solid white; }
  /* line 284, ../sass/partials/_page.scss */
  a.buttonLink:hover, input[type='submit']:hover {
    color: white;
    background: #f58220; }
  /* line 289, ../sass/partials/_page.scss */
  a.buttonLink:disabled, input[type='submit']:disabled {
    background: #999999; }

span.loading-spinner {
  background-image: url("http://jesereltawasol.localhost/img/ajaxLoader.gif");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: transparent;
  height: 32px;
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0; }
  /* line 12, ../sass/partials/_incredible.button.scss */
  span.loading-spinner.loading {
    display: inline-block;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1; }

/* line 18, ../sass/partials/_incredible.button.scss */
input[type=submit].incredible-button.loading, button.incredible-button.loading, input[type=submit].incredible-button.loading:hover, button.incredible-button.loading:hover {
  background: #999;
  color: transparent; }

ul{ list-style: none; }

JavaScript

// incredible buttons
$(function () {
    // create the loading-spinner span
    if ($(".incredible-button").length) {
        $.grep($(".incredible-button"), function (that, n) {
            $(that).parent().css("position", "relative");
            var spinner = "<span class='loading-spinner' style='width:" + $(that).innerWidth() + "px; margin-left: -" + ($(that).outerWidth() - (($(that).outerWidth() - $(that).innerWidth()) / 2)) + "px'></span>";
            $(that).after($(spinner));
        });
    }

    // upon click
    $(".incredible-button").bind('click', function () {

        // keep the button object
        var that = $(this);

        // set it to loading mode
        $(that).addClass("loading");

        // retrieve the loading spinner
        var spinner = $(that).next("span.loading-spinner");

        if (spinner) {
            // show the spinner
            $(spinner).addClass("loading");

            switch (that.attr("transition")) {
                case "slide-right":
                    var x = (spinner.innerWidth() / 2) - (32 / 2);
                    $(spinner).animate({
                        'background-position-x': x + 'px'
                    }, {
                        duration: 300
                    });
                    break;
                default:
                    break;
            }
        }
    });
});


// function that notifies the button that it has completed the action (and returns it back to normal)
(function ($) {
    $.extend($.fn, {
        notify: function () {
            // check if the item is of the correct type
            if ($(this).is("input[type=submit], button")) {
                var that = $(this);

                // retrieve the loading spinner
                var spinner = $(that).next("span.loading-spinner");

                if (spinner) {

                    switch (that.attr("transition")) {
                        case "slide-right":
                           ...