title: How do I make a spin loader display for 2 seconds after which the main content shows up and spin loader disappears
body: <p>I am trying to create a spin-loader with css and deploy it on my page so that when visitor accesses the page, spin-loader displays for 2 seconds (like loading) after which the main content Appears and loader Disappears/hide. This is more like loading a page each time it is accessed.</p>
  <p>I have been able to create the spin-loader with css</p>
  <pre><code>.loading {
      display: flex;
      justify-content: center;
  }
        
  .loading::after {
      content: &quot;&quot;;
      width: 37.6px;
      height: 37.6px;
      border: 8px solid #bbdbfc;
      border-top-color: #0c6cf2;
      border-radius: 50%;
      animation: loading 1s linear infinite;
  }
  
  
  @keyframes loading {
      to {
          transform: rotate(1turn);
      }
  }
  
  
  
  .content { }
  
  </code></pre>
  <p>Here is the spin-loader deployed to the body of the code.</p>
  <pre><code>&lt;div class=&quot;loading&quot;&gt;
    &lt;div align=&quot;center&quot; style=&quot;position: absolute; margin-top: 63px; text-align: center; font-size: 18px; font-family: sans-serif; font-weight: 550; color: #fafafd;&quot;&gt;Loading...
    &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>Then here is the content I want to display after spin-loader loads for 2 seconds</p>
  <pre><code>&lt;div class=&quot;content&quot;&gt;
     Lorem ipsum display spin loader for 2seconds before this main content displays
  &lt;/div&gt;
  </code></pre>
  <p>Thank you I appreciate!</p>