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
- What is the difference between “screen” and “only screen” in media queries?
- What is the difference between display: inline and display: inline-block in CSS?
- Screen Reader utilities in bootstrap with Examples
- How to Align navbar logo to the left screen using Bootstrap ?
- Display Property in Bootstrap with Examples
- How to display multiple horizontal images in Bootstrap card ?
- 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 Display Validation Message for Radio Buttons with Inline Images using Bootstrap 4 ?
- Difference between REST API and SOAP API
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- Include Bootstrap in AngularJS using ng-bootstrap
- How to Create Skeleton Screen Loading Effect using CSS ?
- How to fetch data from localserver database and display on HTML table using PHP ?
- How to fetch data from JSON file and display in HTML table using jQuery ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. 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.