title: fetch api css loader
body: <p>I'm using fetch API to access a REST API I developed and hosted online. But when retrieving data from the database (>60 rows) to be displayed in a section of the page, it takes about 3-5 seconds to display the data which I styled with HTML and CSS.</p>
  
  <p>My question is how can i implement a css preloader to load before the actual data is displayed. And how do i know that the data has been displayed.</p>
  
  <p><strong>Below is a part of my code.</strong></p>
  
  <pre><code>// Front end
  frontend.html
  
  &lt;table&gt;
  &lt;caption&gt;User requests&lt;/caption&gt;
  &lt;thead class="table-head"&gt;
  &lt;tr&gt;
      &lt;th scope="col"&gt;Request Id&lt;/th&gt;
      &lt;th scope="col"&gt;User ID&lt;/th&gt;
      &lt;th scope="col"&gt;Brand&lt;/th&gt;
          &lt;th scope="col"&gt;Type&lt;/th&gt;
   &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody id="tablebody"&gt;
  
    &lt;div class="loader" id="loader"&gt;&lt;/div&gt;
  
    &lt;/tbody&gt;
       &lt;/table&gt; 
  
  
  
  
  
  // file.js
  fetch(url, { 
  method: 'GET',
  headers: {'Authorization': 'Bearer ' +token}
  }).then(response =&gt;{ 
  // Redirect the user to the login page
  // If the user is not an admin
  if(response.status === 401) {
      window.location.replace('./Index.html');
  }
  return response.json()
  })
  .then((data) =&gt; {  
  let completedata = data.allRequests;
  if(completedata) {
      completedata.forEach((item) =&gt; {
          timeStamp = new Date(item.createdon);
          dateTime = timeStamp.toDateString();
          theOutput +=`&lt;tr id="listofrequests"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;td data- 
  label="Request Id"&gt;${item.id}&lt;/td&gt; &lt;/a&gt;
          &lt;td data-label="Brand"&gt;${item.userid}&lt;/td&gt;
          &lt;td data-label="Brand"&gt;${item.brand}&lt;/td&gt;
          &lt;td data-label="Type"&gt;${item.other}&lt;/td&gt;
          &lt;td data-label="Status"&gt;${item.name}&lt;/td&gt;
          &lt;td data-label="Status"&gt;&lt;a href="./Request-status.html" class="btn 
  view-detail" id="${item.id}" onClick="adminviewonerequest(this.id)"&gt;view&lt;/a&gt; 
  &lt;/td&gt;
  &lt;td data-label="Cancel"&gt;&lt;button class="danger" id="${item.id}" 
  name="${item.name}" onClick="return cancelrequest(this.id, this.name)"&gt;&lt;i 
  class="fa fa-trash"&gt; Cancel Request&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;
        &lt;/tr&gt;`;
      });
  }
  else {
      toastr.warning(data.message);
  }
  
  document.getElementById('tablebody').innerHTML = theOutput;           
  })
  .catch(err =&gt; console.log(err));
  </code></pre>