What are the steps to create a custom progress bar using JavaScript?

Question

What are the steps to create a custom progress bar using JavaScript?

I have experience with HTML and CSS.

Below is the HTML code:

<div id="wrapper">
  <ul id="top">
    <center><li><a href="#one" class="button">GENERATE</a></li></center>
  </ul>
  <div class="box" id="one">
    <span style="width:1%"></span>
  </div>
</div>

This is the CSS code:

.box {
left: 50px;
right: 50px;
width: 80%;
margin-bottom: 50px;
border: 2px solid #000;
box-shadow: 10px 10px 5px #888888;
background-color: #f90;
opacity: 0;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-moz-transition: all 1s linear;
-0-transition: all 1s linear;
transition: all 1s linear;
}
.box: target {
opacity: 1;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-moz-transition: all 1s linear;
-0-transition: all 1s linear;
transition: all 1s linear;
}
#one {
... (CSS properties continue)

The desired functionality is for a progress bar to start loading when someone clicks on the button, stop at 50%, and then open a popup window.

The popup window should display text along with a button.

To see a demo, follow this link: MYCODE

javascript html css

Answer 1

Answer №1

A great illustration of a progress bar suitable for beginners can be found here: example of progress bar

Here is the complete code for your reference:

<html>
<style>
#myProgress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #ddd;
}

#myBar {
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #4CAF50;
}

#label {
  text-align: center;
  line-height: 30px;
  color: white;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar">
    <div id="label">0%</div>
  </div>
</div>

<br>
<button onclick="move()">Click Me</button>

<script>
function move() {
  var elem = document.getElementById("myBar");
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 50) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      document.getElementById("label").innerHTML = width * 1  + '%';
    }
  }
}
</script>

</body>
</html>

Answer 2

A great illustration of a progress bar suitable for beginners can be found here: example of progress bar

Here is the complete code for your reference:

<html>
<style>
#myProgress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #ddd;
}

#myBar {
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #4CAF50;
}

#label {
  text-align: center;
  line-height: 30px;
  color: white;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar">
    <div id="label">0%</div>
  </div>
</div>

<br>
<button onclick="move()">Click Me</button>

<script>
function move() {
  var elem = document.getElementById("myBar");
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 50) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      document.getElementById("label").innerHTML = width * 1  + '%';
    }
  }
}
</script>

</body>
</html>

What are the steps to create a custom progress bar using JavaScript?

Answer №1

Similar questions

Steps for Implementing a "Load More" Button on an HTML JSON Page

Vue Loader: Multiple loaders for a single file extension

In the dragstart event handler, event.dataTransfer and event.originalEvent will consistently be null

Issue with dynamically passing select values to pop-up link in Firefox

Keeping Chart.JS Up to Date: Updating Only Fresh Data

The issue persists with multiple instances of Swiper js when trying to use append and prepend functions

Seeking assistance to transfer div elements into a different div post an onclick event

Issue with ReactJS: onChange event does not function properly when value is changed using jQuery

Sending array values from a dynamic input field in Angular 4 and processing them accordingly

Creating TypeScript object properties dynamically based on function arguments

Looking for a way to customize the background-color and border of the <tr> element in DataTables 1.9.4? Learn how to enhance the styling of your tables with these

Perpetual spinning of image grid

The object in question cannot be used as a constructor

Browsing JSON data to pinpoint locations on a Google map

Can a variable be initialized with a concealed or additional argument?

Remove a specific line from a PHP script

Show an HTML email message on a webpage without disrupting the existing page layout

Fixing a CSS animation glitch when using JavaScript

Retrieve the post ID from the existing URL via AJAX in order to fetch data associated with that particular ID

What is the counterpart of `width: max(100%, fit-content)`?