preloader предзагрузчик страницы, когда пользователь нажимает a href class

Мне нужно добавить предзагрузчик страницы, когда пользователь нажимает на ссылку которая возвращает результат Ajax запроса, что бы пользователя уведомить что происходит какое-то действие. Почему код не работает в чем причина?

                   <div class="categories" >
                        <div class="buttonsRow rounded row">
                            @foreach($categories as $category)
                                <div class="col-lg-3">
                                   <div class="lds-dual-ring"></div> 
                                    <a class="c category-link" href="{{ route('home').'?category='.$category->url }}">{{ $category->name}}</a>
                                </div>
                            @endforeach
                        </div>
                    </div>

            $(function() {
                $(".lds-dual-ring").fadeOut(2000, function() {
                    $(".category-link").fadeIn(1000);
                });
            });
        </script>

  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}