Friday, October 3, 2025
HomeLanguagesJavascriptHow to Create a Bootstrap Spinner and Display on Screen till the...

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.

Pre-requisite: 

  • You will need some knowledge about JavaScript fetch API.
  • You will need a mock API for getting data.

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”

RELATED ARTICLES

Most Popular

Dominic
32331 POSTS0 COMMENTS
Milvus
85 POSTS0 COMMENTS
Nango Kala
6703 POSTS0 COMMENTS
Nicole Veronica
11868 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11929 POSTS0 COMMENTS
Shaida Kate Naidoo
6818 POSTS0 COMMENTS
Ted Musemwa
7080 POSTS0 COMMENTS
Thapelo Manthata
6775 POSTS0 COMMENTS
Umr Jansen
6776 POSTS0 COMMENTS