Breaking News: Grepper is joining You.com. Read the official announcement!

progressbar javascript

Abhishek answered on May 26, 2022 Popularity 10/10 Helpfulness 2/10

answer progressbar javascript

related how to do a progress bar with html css and javascript

progressbar javascript

Comment

// index.html
<body>
<div class="myProgress"></div>
<div class="myBar"></div>
<br />
<button onclick="move()">Click me</button>
</body>
// style.css
.myProgress {
  width: 100 %;
  background - color: grey;
}
.myBar {
  width: 100 %;
  height: 30px;
  background - color: #04aa6d;
}

#play - animation {
  animation: progress - animation 5s forwards;
}

@keyframes progress - animation {
  0 % {
    width: 0 %;
  }
  100 % {
    width: 100 %;
  }
}

// logic.js
const move = () => {
  const progressBar = document.querySelector(".myBar")
  progressBar.setAttribute('id', 'play-animation')
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript progress-bar

Link to this answer
Share Copy Link

Contributed on May 26 2022

Abhishek

0 Answers Avg Quality 2/10

Closely Related Answers

how to do a progress bar with html css and javascript

Comment

<!DOCTYPE html>
<html>
<head>
  <style>
    .progress-bar {
      width: 100%;
      background-color: #f0f0f0;
    }

    .progress {
      width: 0%;
      height: 20px;
      background-color: #4caf50;
      transition: width 0.3s ease-in-out;
    }
  </style>
</head>
<body>
  <div class="progress-bar">
    <div class="progress"></div>
  </div>

  <script>
    function updateProgressBar(progress) {
      const progressBar = document.querySelector('.progress');
      progressBar.style.width = `${progress}%`;
    }

    // Example usage: updateProgressBar(50);
  </script>
</body>
</html>

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: chat.openai.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Jun 21 2023

AvikkyCodes

0 Answers Avg Quality 2/10

progressbar javascript

Contents

More Related Answers

progressbar javascript

Closely Related Answers

how to do a progress bar with html css and javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.