JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="start_stop_animation('.text_block');">Запустить/Остановить анимацию загрузки</button>

<div class='text_block'>
  Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. Художественный стиль не был бы самим собой, если бы в нем не было сравнений. 
</div>

<div>
  Какой то текстовый блок дальше...
</div>

CSS

.overlay_block{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(https://web-finder.ru/files/preloader1.gif) center center no-repeat;
  z-index: 9999;
}

.loading_process{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  filter: blur(5px);
}

.main_overlay_block{
  position: relative;
}

JavaScript

function loading_animation_start(block){
	$(block).wrap( '<div class="main_overlay_block"></div>' );
  $('.main_overlay_block').prepend('<div class="overlay_block"></div>');
  $(block).addClass('loading_process');
}

function loading_animation_end(block){
  $(block).unwrap();
  $('.overlay_block').remove();
  $(block).removeClass('loading_process');
}

function start_stop_animation(block){
	if ($(block).parent().is('.main_overlay_block')){
  	loading_animation_end(block);
  } else {
  	loading_animation_start(block);
  }
}