我有一个图像按钮:
<input type="image" src="https://en.opensuse.org/images/4/49/Amarok-logo-small.png">
我希望在点击时在按钮(不是整页)上显示加载动画。
我尝试使用gif图像,当点击按钮时显示但不完全按下按钮。
答案 0 :(得分:1)
要显示重叠元素,常见的方法是使用absolute
(或fixed
)定位。要显示位于img元素上方的加载器,您可以按照以下步骤操作:
position: relative
。 absolute
职位也符合我们的目的,但这更有可能影响您当前的布局。absolute
定位将此加载器放在img元素上,并根据您的要求放置它。
// bind click event
// you can use any event to trigger this
document.querySelector("#show-loader").onclick = function(){
document.querySelector(".loader-wrapper").className = "loader-wrapper loading";
};//
&#13;
.loader-wrapper{
display: inline-block;
position: relative;
}
.loader-wrapper .loader{
display: none;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.loader-wrapper.loading .loader{
display: block;
}
.loader-wrapper .loader span{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: orange;
left: 50%;
top: 50%;
margin-left: -10px;
margin-top: -10px;
animation: zoom 1s ease infinite;
}
@keyframes zoom{
0%{ transform: scale(1);}
50%{ transform: scale(2);}
100%{ transform: scale(1);}
}
&#13;
<div class="loader-wrapper">
<input type="image" src="https://en.opensuse.org/images/4/49/Amarok-logo-small.png">
<div class="loader">
<span></span>
</div>
</div><!--#wrapper-->
<br />
<button id="show-loader">Show loader</button>
&#13;