Open In App
Related Articles

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

Like Article
Save Article
Report issue

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.



  • Create necessary HTML, CSS, and JavaScript file for the task.
  • In HTML file, link bootstrap in head section.
    <link rel=”stylesheet” href=”” 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>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href=
    <div class="spinner-border text-primary" 
        id="spinner" role="status">
        <span class="sr-only">Loading...</span>
    <div id="data"></div>


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();
    if (response) {
        = `<h1>${}</h1>`;
// Calling that async function 
// Function to hide the Spinner
function hideSpinner() {
            .style.display = 'none';



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

API link: “”

Last Updated : 10 Jun, 2020
Like Article
Save Article
Share your thoughts in the comments
Similar Reads