Skip to content
Related Articles

Related Articles

Improve Article

How to Create a Bootstrap Spinner and Display on Screen till the data from the API loads ?

  • Last Updated : 10 Jun, 2020
Geek Week

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.

Pre-requisite: 

Approach:

  • Create necessary HTML, CSS, and JavaScript file for the task.
  • 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, 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.

HTML file:






<!DOCTYPE html>
<html>
  
<head>
    <script src="script.js"></script>
    <title>Spinner</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href=
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous">
</head>
  
<body>
    <div class="spinner-border text-primary" 
        id="spinner" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    <div id="data"></div>
</body>
  
</html>

JavaScript file:




// API url 
const api_url =
  
// Defining async function 
async function getapi(url) {
  
    // Storing response 
    const response = await fetch(url);
  
    // Storing data in form of JSON 
    var apidata = await response.json();
    console.log(apidata);
    if (response) {
        hideSpinner();
    }
    document.getElementById("data").innerHTML
        = `<h1>${apidata.data}</h1>`;
}
  
// Calling that async function 
getapi(api_url);
  
// Function to hide the Spinner
function hideSpinner() {
    document.getElementById('spinner')
            .style.display = 'none';

Output:

You can see in output window, spinner loads till the Data from API comes.

API link: “https://mygfgapi.free.beeceptor.com/my/api/path”

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :