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”
- How to Display Spinner on the Screen till the data from the API loads using Angular 8 ?
- jQuery UI | Spinner to select numeric data
- Display Property in Bootstrap with Examples
- Screen Reader utilities in bootstrap with Examples
- How to display bootstrap carousel with three post in each slide?
- How to change column to row on small display in Bootstrap 4 ?
- How to Align navbar logo to the left screen using Bootstrap ?
- How to display multiple horizontal images in Bootstrap card ?
- How to Display Validation Message for Radio Buttons with Inline Images using Bootstrap 4 ?
- How to Create Skeleton Screen Loading Effect using CSS ?
- How to create five equal columns in Bootstrap ?
- How to Create ToDo App using HTML, CSS, JS and Bootstrap ?
- How to use SASS to create new set of color styles in Bootstrap 4 ?
- How to create Responsive Bottom Navigation Bar using Bootstrap ?
- How to display output data in tabular form in Node.js ?
- How to display length of filtered ng-repeat data in AngularJS ?
- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- How to fetch data from localserver database and display on HTML table using PHP ?
- How to create responsive website zoomed out to full width on mobile using Bootstrap?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.