JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="mask-loading">
    <figure>
        <img class="ajax-spinner img-responsive" src="http://www.mtlexs.com/images/reload.gif" alt="carregando...">
        <figcaption class="loading-text">carregando</figcaption>
    </figure>
</div>


<button type="button" id="botao-filtrar">
<i class="fa fa-filter"></i> Filtrar
</button>

CSS

.mask-loading {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    background-color: #000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    display: none;
}
.ajax-spinner {
    top: 500px;
    z-index: 1000;
}

JavaScript

$('#botao-filtrar').click(function() {
  $('.mask-loading').toggle();
});