css 如何在onlick按钮上添加加载微调器

hmae6n7t 于 2023-04-01 发布在其他

关注(0)|答案(3)|浏览(100)

我有个输入我们去拿那个密码

<div id="demo2"></div>

<script type="text/javascript">
    
function myFun() {
 var a = document.getElementById("demo").value ;
 document.getElementById("demo2").innerHTML = a ;
}

</script>
<input type="text" id="demo"/>
<button onclick="myFun()">Click Me </button>

现在我希望当用户点击按钮时，将需要5-6秒来显示输入的值，并在此同时加载微调器将加载，有人能帮助我吗？

**编辑：**多么愚蠢的问题啊！我是多么愚蠢，哈哈

css

来源：https://stackoverflow.com/questions/53134560/how-can-i-add-loading-spinner-on-button-onlick

3条答案

按热度按时间

bfnvny8b1#

这很简单。你可以做如下的事情：

var buttonElem = document.querySelector('.button');
    
    buttonElem.addEventListener("click", function() {
      buttonElem.classList.add('spinning');
 
      setTimeout( 
            function  (){  
                buttonElem.classList.remove('spinning');
          
            }, 6000);
    }, false);

.button {
  display: inline-block;
  outline: none;
  padding: 10px 20px;
  background: #444;
  border-radius: 4px;
  color: #fff;
  border: 0;
  position: relative;
  transition: padding-right 0.3s ease;
  box-shadow: 0 1px 0 #6e6e6e inset, 0px 1px 0 #3b3b3b;
}
.button.spinning {
  padding-right: 40px;
}
.button.spinning:after {
  content: "";
  right: 6px;
  top: 50%;
  width: 0;
  height: 0;
  position: absolute;
  border-radius: 50%;
  -webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
          animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
}
.button.spinning:before {
  content: "";
  width: 0px;
  height: 0px;
  border-radius: 50%;
  right: 6px;
  top: 50%;
  position: absolute;
  border: 2px solid #000000;
  border-right: 3px solid #27ae60;
  -webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
          animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
}
@-webkit-keyframes rotate360 {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes exist {
  100% {
    width: 15px;
    height: 15px;
    margin: -8px 5px 0 0;
  }
}
@keyframes exist {
  100% {
    width: 15px;
    height: 15px;
    margin: -8px 5px 0 0;
  }
}

<button class="button">Click Me</button>

赞(0）回复(0）举报 2023-04-01

i1icjdpr2#

下面的代码会帮助你，微调器在内容显示之前加载，当内容准备好显示时，微调器被删除。

function myFun() {
  var a = document.getElementById("demo").value;
  document.getElementById("demo2").innerHTML = "";
  document.getElementById("demo2").classList.add("loader");
  setTimeout(function() {
    document.getElementById("demo2").classList.remove("loader");
    document.getElementById("demo2").innerHTML = a;
  }, 2000);
}

.loader {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #3498db;
  width: 20px;
  height: 20px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
}


/* Safari */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div id="demo2"></div>

<input type="text" id="demo" />
<button onclick="myFun()">Click Me </button>

赞(0）回复(0）举报 2023-04-01

xwbd5t1u3#

这是另一个例子，当你可以使用页面中间的微调器，并在一个中使用两个功能

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    /* Center the loader*/
    .loader {    
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid blue;
      width: 120px;
      height: 120px;
    
      border-right: 16px solid green;
      border-bottom: 16px solid red;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }
    
    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    
    
    
    </style>
    </head>
    <body>
    
      <div id="demo2"></div>
    
      <input type="text" id="demo"/>
      <button onclick="myFunction()">Click Me </button>
    
    <script>
    var myVar;
    function myFunction() {
    
      myVar = document.getElementById("demo").value;
      document.getElementById("demo2").innerHTML = "";
      document.getElementById("demo2").classList.add("loader");
         setTimeout(showPage, 3000);
    
    }
    
    function showPage() {
    
        document.getElementById("demo2").classList.remove("loader");
        document.getElementById("demo2").innerHTML = myVar;
        document.getElementById("demo").value = "";
    
    }
    </script>
    
    </body>
    </html>

赞(0）回复(0）举报 2023-04-01

我来回答

css 如何在onlick按钮上添加加载微调器

3条答案

相关问题

热门标签

最新问答