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

【问题标题】：Search Button with loading animation inside button搜索按钮，按钮内有加载动画
【发布时间】：2021-05-31 02:31:16
【问题描述】：

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

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

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

【问题讨论】：

标签： html button bootstrap-4

【解决方案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>

【讨论】：