Module «btn-loadable». Добавляет к любой кнопке спиннер при наличие класса loading.

Демо:

https://codepen.io/ildar-meyker/pen/dyrMKop

Плагины:

Подключение:

//

Разметка:

//

<a href="#" class="btn btn-primary btn-loadable">
    <span>Загрузить еще</span>
    <div class="btn-loadable__spinner"></div>
</a>

Стили:

// blocks/buttons/btn-loadable.scss

.btn-loadable {
    position: relative;

    &.loading {
        > * {
            visibility: hidden;
        }

        > .btn-loadable__spinner {
            visibility: visible;
        }
    }

    &__spinner {
        width: 1.5em;
        height: 1.5em;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: btnLoadRotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -0.75em 0 0 -0.75em;
        visibility: hidden;
    }
}

@keyframes btnLoadRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Инициализация:

// modules/demo.js
// #demo
$(function () {
    $(".btn-loadable").on("click", function (e) {
        e.preventDefault();

        $(this).addClass("loading");

        setTimeout(() => {
            $(this).removeClass("loading");
        }, 1500);
    });
});