Эмиль Рахматуллин

Вместо шины событий лучше использовать Vuex

Сделал через градиент лоадер -> https://jsfiddle.net/70125g9x/49/

Ну так можно:

<div class="fact">
	<div class="icon">
		<span class="icon-class"></span>
	</div>
	<!-- /.icon -->
	<h5>Надёжность</h5>
	<p>Чёткое выполнение взятых...</p>
</div>
<!-- /.fact -->

CSS:

.fact {
	position: relative;
	height: 300px;
	padding: 140px 20px 20px 20px;
}

.icon {
	position: absolute;
	left: 0;
	top: -100px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
}

Переменная $this.
Типичная проблема при создании self-controlled компонентов (особенно при использовании методологии BEM) — это создание селекторов внутри модификаторов.

Вместо:

.filter-block {
    &__title {
        color: black;
    }
        
    &--expandable {
        .filter-block__title {
            color: blue;
        }
    }
}

Можно:

.filter-block {
    $this: &;
    &__title {
        color: black;
    }
    &--expandable {
        #{$this}__title {
            color: blue;
        }
    }
}

Можешь:
a) Посмотреть плагин angry-cart.js, как пример
б) Использовать этот плагин, так как он на чистом JS и довольно мелкий)

У тебя отличаются версии Bootstrap. Подключи Bootstrap JS той же версии, что и Bootstrap CSS:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Локально.
Подключение через сервисы дольше времени занимает. Тем более, твой ресурс будет больше зависеть от места, с которого ты подключаешь его.

var input = $('input[name="menu"]:checked').val();
console.log(input);