Pratyush Biswas Pratyush Biswas - 1 year ago 147
Javascript Question

How to create a power bar in JavaScript

How to create a power bar which will toggle automatically up and down and will stop when i click on the screen.

Answer Source

You will need to be more specific about what exactly you have tried and what is not working. However, this should get you started. This example uses sgv but could easily be translated into a more div oriented approach.

The objective is to hit the toggle button when the circle is in the center region. Good Luck!

Note: This might only work in chrome at the moment.

document.getElementById("toggler").addEventListener("click", function(){
  var el = document.querySelector("circle");
  var className = "stopped";


  if (!el.classList.contains(className)) { return }

  var currentCX = parseFloat(getComputedStyle(el).getPropertyValue("cx"));

  if (currentCX >= 240 && currentCX <= 260 ) {
  } else {
@keyframes sweep {
  from { cx: 5; }
  to { cx: 495; }

  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-name: sweep;
  animation-iteration-count: infinite;  
  animation-direction: alternate;

  animation-play-state: paused;
<svg id="lineWithDots" width="500px" height="20px">
  <g transform="translate(0,10)">
    <rect width="490" height="2" y="-1" x="5" />
    <rect width="20" height="10" y="-5" x="240" />
    <circle r="4" cx="5" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)" />

  <button id="toggler">toggle</button>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download