Showing Loading Animation on Image Button, when clicked

Question

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.

Answer 1

To show overlapping elements, a common approach is to use absolute (or fixed ) positioning. To show the loader, placed above your img element, you can follow these steps:

1. Wrap your img element in a wrapper div and give this div position: relative . absolute position will also serve our purpose but that is more likely to affect your current layout.
2. Now, inside your wrapper div, add another div that will contain the loading animation (which may be a gif, or contain any other animation structure). Place this loader over your img element using absolute positioning and place it as per your requirements.

 // 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>