html5 - How to create a power bar in JavaScript -

how create power bar toggle automatically , down , stop when click on screen.

http://i.stack.imgur.com/l3jsh.jpg

you need more specific have tried , not working. however, should started. example uses sgv translated more div oriented approach.

the objective hit toggle button when circle in center region. luck!

note: might work in chrome @ moment.

document.getelementbyid("toggler").addeventlistener("click", function(){    var el = document.queryselector("circle");    var classname = "stopped";      el.classlist.toggle(classname);      if (!el.classlist.contains(classname)) { return }      var currentcx = parsefloat(getcomputedstyle(el).getpropertyvalue("cx"));      if (currentcx >= 240 && currentcx <= 260 ) {      console.log("hit");    } else {      console.log("miss");    }  });

@keyframes sweep {    { cx: 5; }    { cx: 495; }  }    circle{    animation-duration: 3s;    animation-timing-function: ease-in-out;    animation-name: sweep;    animation-iteration-count: infinite;      animation-direction: alternate;  }    circle.stopped{    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)" />    </g>  </svg>    <div>    <button id="toggler">toggle</button>  </div>