Question 360016 in Html Question posted in
Some basic documentation can be found here.

Html – need help creating a loading bar

I am trying to make a loading bar, just like in monkey type when it’s ‘downloading your data and applying settings’. I just want to make the bar, and the orange gradient move from the leftmost to the right.

I tried using a linear gradient for this, but it seems that it just flips between the two states ( which is also random).

body {
    background: black;
}

.line {
    position: absolute;
    width: 200px;
    height: 25px;
    margin: auto;
    background: linear-gradient(to right, orange, grey);
    border-radius: 25px;
    animation: gradual 2s ease-in-out infinite;
}

@keyframes gradual {
    0% {
        background: linear-gradient(to right, 0% orange, 100% grey);
    }

    100% {
        background: linear-gradient(to right, 100% orange, 0% grey);
    }
}
<div class='line'></div>
Tags:

2

Answers


  1. 0

    When you click the button it triggers the move() function which then gets the elem element from the document. It makes variables, width and id. If the width is below 100, it’s going to make the width go +1. if it’s above 100, it’s going to not change the progress bar. The CSS styles the progress bar to make the gradient and make it look good.

    You can achieve an animated loading bar using javascript setTimeout, adjust the timeout to change the speed that the progress bar increases. Here’s a snippet demonstrating this approach with a linear gradient.

    function move() {
  var elem = document.getElementById("myBar");
  var width = 0;
  var id = setInterval(frame, 10);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}
    #myProgress {
  width: 100%;
  background-color: #ddd;
  border-radius: 20px;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  background: linear-gradient(to right, orange, black);
  border-radius: 20px;
}
    <h1>progress bar click button</h1>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">click the button</button>
    Login or Signup to reply.
  2. 0

    This code snippet utilizes CSS animations and keyframes to create a loading bar effect with an orange gradient moving from left to right. By animating the background-position. The animation duration is set to 2 seconds.

    body {
  background: black;
}

.line {
  position: absolute;
  width: 200px;
  height: 25px;
  margin: auto;
  background: linear-gradient(to right, orange, grey);
  border-radius: 25px;
  animation: moveGradient 2s linear infinite;
}

@keyframes moveGradient {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}
    <div class='line'></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search