title: progress bar for loading animation of webpage
body: <p>I want to make a loading animation for my webpage which will take 8-10 sec to load using JavaScript or Ajax(Which I don't know)</p>
  <p>The loading animation is a progress bar
  Which I want to stop for every 1 sec for increment of 10% eg( <a href="https://codepen.io/gustitammam/pen/RRXGdj" rel="nofollow noreferrer">https://codepen.io/gustitammam/pen/RRXGdj</a> )</p>
  <p>Bootstrap is not welcomed and I don't want text and percentage on it</p>
  <p>HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;D:\PORTFOLIO\master.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot; /&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js&quot; integrity=&quot;sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.js&quot; integrity=&quot;sha512-qsjFwnCEe/k1YLJDkiRqDgKb+Eq+35xdoeptV7qfI7P6G/kajIF0R6d/9SiOxSkU/aNmHzuipOEYaTUHCJUIeQ==&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js&quot; integrity=&quot;sha512-oHBLR38hkpOtf4dW75gdfO7VhEKg2fsitvHZYHZjObc4BPKou2PGenyxA5ZJ8CCqWytBx5wpiSqwVEBy84b7tw==&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;myprogress&quot;&gt;
        &lt;div id=&quot;mybar&quot;&gt;
          &lt;span id=&quot;incvalue&quot;&gt;1%&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
     &lt;br&gt; &lt;button onclick=&quot;move()&quot;&gt;ClickMe&lt;/button&gt;
     &lt;script&gt;
     const move = () =&gt; {
    var elem = document.getElementById(&quot;mybar&quot;);
    var width = 1;
    var id = setInterval(frame, 10)
  
    function frame(){
      if(width &gt;= 100){
        clearInterval(id);
      }else{
        width++;
        elem.style.width = width + &quot;%&quot;;
        document.getElementById(&quot;incvalue&quot;).innerHTML = width + &quot;%&quot;;
      }
    }
  }
     &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;  
  </code></pre>
  <p>CSS</p>
  <pre><code>html{
    scroll-behavior: smooth;
  }
  
  body{
    background: #181818;
    color: #f4eee8;
  }
  
  #myprogress{
     width: 45%;
     background: #181818;
     margin: auto;
   }
  
   #mybar{
     width: 1%;
     background: white;
     color: white;
     text-align: center;
   }
  </code></pre>