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

时间:2017-10-18 07:24:30

标签: javascript html css

我有一个图像按钮:

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

我希望在点击时在按钮(不是整页)上显示加载动画。

我尝试使用gif图像,当点击按钮时显示但不完全按下按钮。

1 个答案:

答案 0 :(得分:1)

要显示重叠元素,常见的方法是使用absolute(或fixed)定位。要显示位于img元素上方的加载器,您可以按照以下步骤操作:

  1. 将img元素包装在包装器div中并给出此div position: relativeabsolute职位也符合我们的目的,但这更有可能影响您当前的布局。
  2. 现在,在你的包装器div中,添加另一个包含加载动画的div(可能是gif,或包含任何其他动画结构)。使用absolute定位将此加载器放在img元素上,并根据您的要求放置它。
  3. &#13;
    &#13;
    // 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;
    &#13;
    &#13;