Javascript 单击时显示“在图像上加载动画”按钮

我有一个图像按钮：

<input type="image" src="https://en.opensuse.org/images/4/49/Amarok-logo-small.png">

我想在单击按钮时在按钮（而不是整个页面）上显示加载动画

---

我试过使用gif图像，当点击按钮时，它会显示，但不完全显示在按钮上。

要显示重叠元素，常用的方法是使用

绝对定位（或
固定定位）。要显示img元素上方的加载器，可以执行以下步骤：

将img元素包装在包装器div中，并给出该div
位置：relative
<代码>绝对
位置也将满足我们的目的，但这更有可能影响您当前的布局
现在，在包装器div中，添加另一个将包含加载动画的div（可以是gif，也可以包含任何其他动画结构）。使用
absolute
定位将此加载器放置在img元件上，并根据您的要求放置

//绑定单击事件
//您可以使用任何事件来触发此事件
document.querySelector（“#show loader”）.onclick=function（）{
document.querySelector（“.loader wrapper”）.className=“loader wrapper load”；
};//
.loader包装器{
显示：内联块；
位置：相对位置；
}
.loader包装器.loader{
显示：无；
背景色：rgba（0,0,0,0.5）；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
}
.loader-wrapper.loading.loader{
显示：块；
}
.loader wrapper.loader span{
位置：绝对位置；
宽度：20px；
高度：20px；
边界半径：50%；
背景颜色：橙色；
左：50%；
最高：50%；
左边距：-10px；
利润上限：-10px；
动画：缩放1s轻松无限；
}
@关键帧缩放{
0%{变换：比例（1）；}
50%{变换：比例（2）；}
100%{变换：比例（1）；}
}



Show loader
请显示一些努力，您尝试了哪些，哪些不起作用。是否希望将相同的动画精确放置在图像元素上？你是否也在其他地方使用这个动画，或者你只需要在图像上使用它？不，我想要任何加载动画，不完全是这个。但我想把它放在照片上太棒了！！但是，如果我只想在点击图像时看到它，几秒钟后就消失了，该怎么办呢？@JagdeepSingh你能用jQuery还是只用javascript？是的，我用的是javascript。正如我之前所说的，我无法在onclick上加载效果