Loading Bar

Messing around with loading bar stuff. What is a loading bar How do you make a loading bar? This script and codes were developed by Jarad Light on 13 December 2021, Monday.

How do I make an loading bar?
  1. Loading Bar Previews
  2. Loading Bar HTML Codes
  3. Loading Bar CSS Codes
  4. Loading Bar JS Codes
Loading Bar Previews

Loading Bar HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Loading Bar</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="container">
  <div id="reset">Reset</div>
  <div class="outer">
    <div class="inner"></div>
  </div>
  <div id="measure"></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Loading Bar CSS Codes

body {
  background: #111;
}

#container {
  width: 400px;
  margin: 0px auto;
}

.outer {
  margin: 20px 0;
  height: 10px;
  background: #333;
  padding: 3px;
  border-radius: 5px;
}

.inner {
  width: 0px;
  height: 100%;
  border-radius: 3px;
  background: #f11;
  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px -1px 0px rgba(0, 0, 0, 0.7) inset;
}

#reset {
  padding: 10px;
  background: #d22;
  color: white;
  text-align: center;
}

Loading Bar JS Codes

loading = false;

$("#reset").click(function(){
  loading = true;
  $(".inner").css("width",0);
});

window.setInterval(function(){
  if(loading){
    increaseBar();
  }  
}, 10);

function increaseBar(){
  var wInner = $('.inner').width();
  var wOuter = $('.outer').width();
  wInner++;
  if(wInner < wOuter){
    $(".inner").css("width",wInner);
  //}
  } else {
    loading = false;
  }
    
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.