Pratyush Biswas Pratyush Biswas - 3 months ago 16
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.


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>