Javascript 使用JS激活CSS加载程序onclick

我找到了一台装载机。我想在点击按钮后显示3秒钟，然后让它再次消失

我如何修改我的JS，在点击按钮后激活加载器3秒钟，然后停用它

const loadButton=document.querySelector（'.load'）；
loadButton.addEventListener（'click'，函数（e）{
//在此处激活/停用
});
.lds环{
显示：内联块；
位置：相对位置；
宽度：80px；
高度：80px；
}
.lds环分区{
框大小：边框框；
显示：块；
位置：绝对位置；
宽度：64px；
高度：64px；
利润率：8px；
边框：8px实心#fff；
边界半径：50%；
动画：lds环1.2s立方贝塞尔（0.5,0.5,1）无限大；
边框颜色：#fff透明；
}
.lds环形分区：第n个子分区（1）{
动画延迟：-0.45秒；
}
.lds环形分区：第n个孩子（2）{
动画延迟：-0.3s；
}
.lds环形分区：第n个孩子（3）{
动画延迟：-0.15秒；
}
@关键帧lds环{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}

加载
函数加载（）{
document.getElementById（“装入器”）.classList.add（“活动”）；
setTimeout（函数（）{
document.getElementById（“装入器”）.classList.remove（“活动”）；
},3000);
};
#加载器{
显示：无；
}
#加载器。激活{
显示：块；
}
.lds戒指{
显示：内联块；
位置：相对位置；
宽度：80px；
高度：80px；
}
.lds环分区{
框大小：边框框；
显示：块；
位置：绝对位置；
宽度：64px；
高度：64px；
利润率：8px；
边框：8px实心红色；
边界半径：50%；
动画：lds环1.2s立方贝塞尔（0.5,0.5,1）无限大；
边框颜色：红色透明；
}
.lds环形分区：第n个子分区（1）{
动画延迟：-0.45秒；
}
.lds环形分区：第n个孩子（2）{
动画延迟：-0.3s；
}
.lds环形分区：第n个孩子（3）{
动画延迟：-0.15秒；
}
@关键帧lds环{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}

加载
为什么要实现querySelector来定义按钮的单击功能？欢迎使用Stack Overflow，虽然您的答案本身看起来不错，但我建议您阅读以下内容，以便能够以最佳方式提供帮助：