html - 搜索按钮，按钮内有加载动画

Question

我有一个搜索按钮，我试图在搜索按钮中加载动画，但不知道该怎么做。请帮我提出您的建议。

<button class="btn btn-primary tap" type="button" id="searchForContent">Search</button>

<div class="container"> 
     <div id="searchedContent"></div>                     
</div>

标签： htmlbuttonbootstrap-4

Answer 1

const button = document.getElementById("searchForContent");
const searchedContent = document.getElementById("searchedContent");


function search() {
  button.innerHTML = "Searching.... ";
  // you can change this if you calling any api or something
  setTimeout(() => {
  button.innerHTML = "Search";
  searchedContent.innerHTML = "Search results are: "
  }, 3000)
}

<button class="btn btn-primary tap" type="button" id="searchForContent" onclick="search()">Search</button>

<div class="container"> 
     <div id="searchedContent"></div>                     
</div>