Question posted in
You can find the official documentation here.

progress bar for loading animation of webpage – Jquery ajax

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)

The loading animation is a progress bar
Which I want to stop for every 1 sec for increment of 10% eg( https://codepen.io/gustitammam/pen/RRXGdj )

Bootstrap is not welcomed and I don’t want text and percentage on it

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="D:PORTFOLIOmaster.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.js" integrity="sha512-qsjFwnCEe/k1YLJDkiRqDgKb+Eq+35xdoeptV7qfI7P6G/kajIF0R6d/9SiOxSkU/aNmHzuipOEYaTUHCJUIeQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js" integrity="sha512-oHBLR38hkpOtf4dW75gdfO7VhEKg2fsitvHZYHZjObc4BPKou2PGenyxA5ZJ8CCqWytBx5wpiSqwVEBy84b7tw==" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="myprogress">
      <div id="mybar">
        <span id="incvalue">1%</span>
      </div>
    </div>
   <br> <button onclick="move()">ClickMe</button>
   <script>
   const move = () => {
  var elem = document.getElementById("mybar");
  var width = 1;
  var id = setInterval(frame, 10)

  function frame(){
    if(width >= 100){
      clearInterval(id);
    }else{
      width++;
      elem.style.width = width + "%";
      document.getElementById("incvalue").innerHTML = width + "%";
    }
  }
}
   </script>
  </body>
</html>

CSS

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;
 }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Actually I didn't do it but I don't know his Stack ID so @0_0#1045(From Discord)

    HTML

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="D:PORTFOLIOmaster.css">
      </head>
      <body>
        <h3>Dynamic Progress Bar</h3>
        <p>Running progress bar from 0% to 100% in 10 seconds</p>
        <div class="progress">
            <div class="current-progress">
    
            </div>
          </div>
        </div>
        <script src="master.js"></script>
      </body>
    </html>

    CSS

    html{
  scroll-behavior: smooth;
}

body{
  background: #181818;
  color: #f4eee8;
  height: 100vh;
  width: 100vw;
}

.progress {
  position: relative;
  margin-top: 20px;
  height: 20px;
  width: 700px;
  background-color: #181818;
}

.current-progress {
  height: 100%;
  width: 0%;
  background-color: white;
  text-align: center;
  transition: all 0.3s;
}

    JS

    let progressValue = 0;
const progressBar = document.querySelector(".current-progress");

progressBar.style.width = `${progressValue}%`;

const timer = setInterval(() => {
  if (progressValue < 100) {
    progressValue += 10;
    progressBar.style.width = `${progressValue}%`;
  
  }
  if (progressValue === 100) {
    clearInterval(timer);
  }
}, 1000);

    Finally Solved!!!


  2. 0

    In the example you cited, you can just comment out the JS lines where the following fields are set:
    .attr and .text

    Regarding your desire to omit Bootstrap, however, you are not asking a simple technical question but proposing that somebody write a whole program fragment for you, which is generally not the intended purpose of Stack overflow.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search