How to Create a Bootstrap Spinner and Display on Screen till the data from the API loads ?
The task is to display a spinner on the page until the data response from the API comes. We have taken bootstrap spinner to show the example.
- You will need a mock API for getting data.
- In HTML file, link bootstrap in head section.
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css” integrity=”sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh” crossorigin=”anonymous”>
- Now take any spinner from “https://getbootstrap.com/docs/4.4/components/spinners/“, The spinner I had taken for the example is:
<div class="spinner-border text-primary" id="spinner"role="status"> <span class="sr-only">Loading...</span> </div>
- Now, spinner will have to be stopped once the data from the API loads.
- So, get the data from API by Fetch() API method.
- Store the data in a response variable.
- There is an if statement that checks if Response from API came or not.
- If Response came then there is a function hideSpinner() called.
- In that hideSpinner() function by using DOM manipulation, we set display of Spinner element to none.
You can see in output window, spinner loads till the Data from API comes.
API link: “https://mygfgapi.free.beeceptor.com/my/api/path”
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.