Пример: <div class="loader"></div>

Допустим, в нашей верстке есть блок loader, задача которого сводится к уведомлению клиента о том, что после того, как он произвел действие система формирует для него ответ. Данный блок представляет из себя тонкую горизонтальную плашку шириной во всё страницу в верхней части сайта, которая мерцает, изменяя свой цвет с насыщенного синего до бледно-голубого до тех пор пока данные не сформируются. После того, как мы получили данные, блок loader исчезает.

<form class="search-form">
    <input class class="search-form__input" >
</form>

После того как ввели текст и нажали ENTER система крутит наш loader пока не придут данные.

Также в системе существуют другие элементы управления, как например категории, табы и т.п., которые также умеют запускать и останавливать loader.

У меня возник вопрос, можно ли написать эти блоки таким образом, чтобы не зависимо от того, есть в нашей системе loader или нет мы всегда имели АНБ, и имели возможность использовать функционал loader'а. Придется ли нам внедрять loader в каждый блок или есть более изящное решение? Будут ли в таком случае блоки абсолютно независимыми? Возможно нужно смотреть в сторону событий?

п.с сорри за опечатки не попадаю в клавиатуру на планшете своими сосисками, исправлю за компом