Skip to content
Related Articles
Get the best out of our app
Open App

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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 some knowledge about JavaScript fetch API.
  • You will need a mock API for getting data.


  • 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: “”

My Personal Notes arrow_drop_up
Last Updated : 10 Jun, 2020
Like Article
Save Article
Similar Reads
Related Tutorials