Javascript 如何在选定过滤器填充结果时添加加载微调器？

我的网站上有一个画廊部分的HTML代码： 我也在使用bootstrap进行布局和造型， 此处一切正常，单击筛选器时，它将加载并部署所选筛选器的结果：

<!-- ### First Section Begins ### -->

<div class="section third">
<div class="container">  
<div class="row">
<div class="work col-lg-12 cold-md-12 col-sm-12 col-xs-12">
        <h2>Work</h2>
</div>
<div class="filters ">
    <button class="btn btn-default filter-button" data-filter="all">All</button>
    <button class="btn btn-default filter-button" data-filter="wp">WordPress</button>
    <button class="btn btn-default filter-button" data-filter="gr">Graphic Design</button>
    <button class="btn btn-default filter-button" data-filter="ecomm">E-Commerce</button>


</div>



<div class="work_item col-lg-4 col-md-4 col-sm-4 col-xs-4 filter wp" >
        <img src="./Assests/images/icodetheweb.jpg" width="350px" height="350px" calss="img-respon" >

    </div>


<div class="work_item col-lg-4 col-md-4 col-sm-4 col-xs-4 filter wp">
        <img src="./Assests/images/icodetheweb.jpg" width="350px" height="350px"   calss="img-respon">
    </div>

    <div class="work_item col-lg-4 col-md-4 col-sm-4 col-xs-4 filter gr">
            <img src="./Assests/images/icodetheweb.jpg" width="350px" height="350px"  calss="img-respon">
        </div>

        <div class="work_item col-lg-4 col-md-4 col-sm-4 col-xs-4 filter ecomm">
                <img src="./Assests/images/icodetheweb.jpg" width="350px" height="350px"  calss="img-respon">
            </div>

            <div class="work_item col-lg-4 col-md-4 col-sm-4 col-xs-4 filter wp">
                    <img src="./Assests/images/icodetheweb.jpg" width="350px" height="350px"   calss="img-respon">
                </div>

                <div class="work_item col-lg-4 col-md-4 col-sm-4 col-xs-4 filter wp">
                        <img src="./Assests/images/icodetheweb.jpg" width="350px" height="350px"   calss="img-respon">
                    </div>
                    </div>
                </div>
</div>

---

在该示例中，如何在单击筛选器并等待部署结果时添加加载微调器？请尽量具体：）

如果您想制作一个加载微调器，这应该会很有帮助。有许多针对不同类型微调器的开放源代码可能适合您的站点。希望这有帮助

$（文档）.ready（函数（）{
$（“.filter按钮”）。单击（函数（）{
document.getElementById（“项目”）.className=“隐藏”；
document.getElementById（“微调器”）.className=“微调器”；
设置超时（（）=>{
document.getElementById（“项目”）.className=“显示”；
document.getElementById（“微调器”）.className=“非微调器”；
var值=$（this.attr（'data-filter'）；
如果（值=“全部”）{
//$（'.filter'）.removeClass（'hidden'）；
$（'.filter'）.show（'1000'）；
}否则{
//$（'.filter[filter item=“'+value+''“]'）。removeClass（'hidden'）；
//$（“.filter”）.not（'.filter[filter item=“'+value+'”）.addClass（'hidden'）；
$（“.filter”）.not（'.+value）.hide（'3000'）；
$（'.filter'）.filter（'.+value）.show（'3000'）；
}
}，2000）；//更改此值以控制加载时间。2000=2秒
});
if（$（“.filter按钮”）.removeClass（“活动”））{
$（此）.removeClass（“活动”）；
}
$（此）.addClass（“活动”）；
});
/*此选项控制微调器和项目的可见性。不要改变*/
.隐藏{
可见性：隐藏；
}
.表演{
能见度：可见；
}
/*从这里开始更改微调器css*/
斯宾纳先生{
保证金：100像素自动；
宽度：50px；
高度：40px；
文本对齐：居中；
字体大小：10px；
}
.spinner>div{
背景色：#333；
身高：100%；
宽度：6px；
显示：内联块；
-webkit动画：sk stretchdelay 1.2s无限轻松输入输出；
动画：sk stretchdelay 1.2s无限轻松输入输出；
}
.spinner.rect2{
-webkit动画延迟：-1.1s；
动画延迟：-1.1s；
}
.spinner.rect3{
-webkit动画延迟：-1.0s；
动画延迟：-1.0s；
}
.spinner.rect4{
-webkit动画延迟：-0.9秒；
动画延迟：-0.9秒；
}
.spinner.rect5{
-webkit动画延迟：-0.8s；
动画延迟：-0.8秒；
}
@-webkit关键帧sk stretchdelay{
0%,
40%,
100% {
-webkit转换：scaleY（0.4）
}
20% {
-webkit转换：scaleY（1.0）
}
}
@关键帧sk stretchdelay{
0%,
40%,
100% {
变换：scaleY（0.4）；
-webkit转换：scaleY（0.4）；
}
20% {
转换：scaleY（1.0）；
-webkit转换：scaleY（1.0）；
}
}

工作
全部的
WordPress
平面设计
电子商务
我只是在那个网站上，它很棒，我喜欢它/但我不知道如何在那个例子中实现它。。我想学习如何做/如果有人能帮我解决，我将非常感谢！您应该转到他们的github页面：，并查看他们的说明1st thanx以获取您的答案非常多/我尝试了此方法，微调器工作正常，但我的引导程序的布局现在被破坏/而不是让画廊图像列表并排排列，它们现在垂直排列/…请在您的本地网站上查看。我有这样的权利，第一次看来很好/3顶3底/然后当博顿过滤器点击它变成垂直！！
$(document).ready(function(){

    $(".filter-button").click(function(){
        var value = $(this).attr('data-filter');

        if(value == "all")
        {
            //$('.filter').removeClass('hidden');
            $('.filter').show('1000');
        }
        else
        {
//            $('.filter[filter-item="'+value+'"]').removeClass('hidden');
//            $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
            $(".filter").not('.'+value).hide('3000');
            $('.filter').filter('.'+value).show('3000');

        }
    });

    if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");

});