title: How can I stop loader's animation after 3 seconds
body: <p>my web project has a loader. I can make this loader visible when the site is opened, but I want it to close after 3 seconds, but I could not find how to do this. Please help me :)
  I am using tailwindcss as a css framework.
  I am using Jquery as a Js framework.
  HTML :</p>
  <pre><code>&lt;div id=&quot;loader&quot; class=&quot;w-full h-screen absolute z-50 flex justify-center items-center bg-black hidden&quot;&gt;
      &lt;div id=&quot;loading&quot; class=&quot;w-32 h-32&quot; style=&quot;background: url(/images/loader.jpg)no-repeat center center;background-size:cover;&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;w-full h-screen flex flex-col md:flex-row&quot;&gt;
      &lt;div class=&quot;w-full md:w-1/2 h-full flex flex-col text-center justify-center gap-4 items-center bg-green-450&quot;&gt;
          &lt;p class=&quot;text-7xl font-bold&quot; style=&quot;font-family: 'Rubik', sans-serif;&quot;&gt;KATILIMCIYIM&lt;/p&gt;
          &lt;p class=&quot;text-5xl w-1/2 &quot;&gt;Geçici Personel Arıyorum&lt;/p&gt;
          &lt;button class=&quot;rounded-full shadow-2xl text-4xl px-6 py-2 focus:outline-none bg-yellow-450 hover:bg-yellow-500 mt-16&quot; style=&quot;color:#1AA057;&quot;&gt;BAŞVUR&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;w-full md:w-1/2 h-full flex flex-col text-center justify-center gap-4 items-center bg-yellow-450&quot;&gt;
          &lt;p class=&quot;text-7xl font-bold&quot; style=&quot;font-family: 'Rubik', sans-serif;&quot;&gt;PERSONELİM&lt;/p&gt;
          &lt;p class=&quot;text-5xl w-1/2 &quot;&gt;Fuarda Çalışmak İstiyorum&lt;/p&gt;
          &lt;button class=&quot;rounded-full shadow-2xl text-4xl px-6 py-2 focus:outline-none bg-green-450 hover:bg-green-500 mt-16&quot; style=&quot;color:#FBB13E;&quot;&gt;BAŞVUR&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>    .bg-yellow-450 {
          --tw-bg-opacity: 1;
          background-color: rgba(251, 177, 62, var(--tw-bg-opacity));
      }
  
      .bg-green-450 {
          --tw-bg-opacity: 1;
          background-color: rgba(26, 160, 87, var(--tw-bg-opacity));
      }
  
      #loading {
          animation: load 1s infinite;
      }
  
      @keyframes load {
          0% {
              width: 8rem;
              height: 8rem;
          }
  
          50% {
              width: 9rem;
              height: 9rem;
          }
  
          100% {
              width: 8rem;
              height: 8rem;
          }
      }
  </code></pre>
  <p>JS</p>
  <pre><code>   $(document).ready(function() {
          document.getElementById('loader').style.display = &quot;flex&quot;;
      });
  </code></pre>