JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<!-- data-progres="любое уникальное данное" -->
<button class="buttonBtn" data-progres="save">Сохранить</button>
<button class="buttonBtn" data-progres="add">Добавить</button>
<button class="buttonBtn" data-progres="remove">Убрать</button>
<button class="buttonBtn" data-progres="dell">Удалить</button>
<br /><br />
<div class="content" data-progres="content1">Контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент контент</div>

CSS

.buttonBtn{background-color:#B6D6FF;border:1px solid #7DB0F1;border-radius:3px;color:#195CB3;cursor:pointer;display:inline-block;font-family:"Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif";font-size:14px;font-weight:700;line-height:34px;outline:transparent;padding:0 10px;position:relative;text-align:center;transition:all 0.5s;vertical-align:middle;min-width:80px;}
.content{background-color:#F7F7F7;border:1px solid #CCCCCC;transition:all 0.5s;}
.buttonBtn.progresActive{background-color:#FFB6E9;border:1px solid #F17DB8;}
.content.progresActive{background-color:#E8E8E8;color:#E8E8E8;}
/****************************/
 .progresForm{left:50%;margin-left:-12px;margin-top:-12px;position:absolute;top:50%;height:24px;width:24px;}
.progresForm .ball1{background-color:transparent;border:2px solid #F17DB8;opacity:.9;border-top:2px solid transparent;border-left:2px solid transparent;border-radius:50px;width:20px;height:20px;margin:0 auto;-moz-animation:spin .5s infinite linear;-webkit-animation:spin .5s infinite linear;position:relative;}
.progresForm .ball2{background-color:transparent;border:2px solid #F17DB8;opacity:.9;border-top:2px solid transparent;border-left:2px solid transparent;border-radius:10px;width:10px;height:10px;margin:0 auto;position:relative;-moz-animation:spinoff .5s infinite linear;-webkit-animation:spinoff .5s infinite linear;position:absolute;top:5px;left:5px;}
@-moz-keyframes spin{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}
@-moz-keyframes spinoff{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(-360deg);}}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}
@-webkit-keyframes spinoff{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);}}

JavaScript

var progresDoc = $(document),
    progresPreloader = '<div class="progresForm"><div class="ball1"></div><div class="ball2"></div></div>';

progresDoc.on('click', '[data-progres]', function () {
    if ($(this).hasClass('progresInBtn') == false) {
        var a = $(this).data('progres'),
            b = $(this).html();

        $(this).addClass('progresActive').css({
            'position': 'relative',
            'height': $(this).outerHeight() + 'px',
            'width': $(this).outerWidth() + 'px'
        }).html(progresPreloader);

        /*
        '[data-progres="' + a + '"]';
        данные кнопки для дальнейшей анимации
        a = тип атрибута
        d = контент
        */
        progresClear(a, b);
    }

});

function progresClear(a, b) {
    /* временно для видимости вставлена задержка */
    setTimeout(function () {
        $('[data-progres="' + a + '"]').removeClass('progresActive').removeAttr('style').html(b);
    }, 1200);

};