CODEWITHSUNDEEP
javascripthtmlcss
J4GD33P 51NGH
J4GD33P 51NGH

Reputation: 670

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.

Upvotes: 0

Views: 625

Answers (1)

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

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>

Upvotes: 1

Related Questions