[英]Showing Loading Animation on Image Button, when clicked
I have a image button: 我有一个图像按钮:
<input type="image" src="https://en.opensuse.org/images/4/49/Amarok-logo-small.png">
and i want to show a loading animation on button(not whole page),when clicked. 而且我想在单击时在按钮(不是整个页面)上显示加载动画。
i tried with a gif image, when clicked on button it showed but not exactly on button. 我尝试了一个gif图像,当单击按钮时它显示但不完全在按钮上。
To show overlapping elements, a common approach is to use absolute
(or fixed
) positioning. 为了显示重叠的元素,一种常见的方法是使用absolute
(或fixed
)定位。 To show the loader, placed above your img element, you can follow these steps: 要显示位于img元素上方的加载程序,您可以按照以下步骤操作:
position: relative
. 将img元素包装在包装div中,并指定以下div position: relative
。 absolute
position will also serve our purpose but that is more likely to affect your current layout. absolute
位置也可以达到我们的目的,但这很可能会影响您当前的布局。 absolute
positioning and place it as per your requirements. 使用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"; };//
.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);} }
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.