Fill a bar with jQuery

In this example below you will see how to do a Fill a bar with jQuery with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Laaur, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Laaur ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Fill a bar with jQuery</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

    <div class="container">
    <div class="mini-container"></div>
    <form class="input" >
      <input type="number" min="1" max="100"/>
      <input type="submit" value="Submit" class="btn">
    </form>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/Laaur/fill-a-bar-with-jquery-KQpVVj */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  margin: auto; 
  top:0; bottom:0; left:0; right:0;
  width: 500px;
  height: 50px;
  border: 2px solid #000;
}

.mini-container {
  position: absolute;
  left: 0;
/*   width: 90%; */
  height: 50px;
  background-color: red;
  transition: 500ms;
}

.input {
  position: relative;
  top: 75px;
  z-index: 1;
}

/*Downloaded from https://www.codeseek.co/Laaur/fill-a-bar-with-jquery-KQpVVj */
  // $(".btn").on("click", (e) => {  //wrong 
  $(".input").on("submit", (e) => {
  var input = $("input[type=number]").val();
  $(".mini-container").css("width", input * 5);
  e.preventDefault();
});

Comments