add a spinner in API js

<!-- added spinners -->
    <div id="spinners" class="spinner-grow text-secondary" style="margin:10rem 40rem;" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>

const spinner = document.getElementById("spinners");
const loadData = () =>{
  spinner.removeAttribute('hidden');
    fetch('https://www.thesportsdb.com/api/v1/json/2/all_sports.php')
    .then((res) => res.json())
    .then((data) =>{
      spinner.setAttribute('hidden', '');
      displayData(data.sports)
    });
}
loadData()