micro-fps hello world

HTML

<script src="https://unpkg.com/micro-fps@0.0.0/dist/umd/microFps.min.js"></script>
<pre id="fpsMeter"></pre>

<div id="anim">
  <div id="box"></div>
</div>

CSS

#anim {
  height: 300px;
  width: 300px;
}

#anim{
    background: black;
    overflow: hidden;
}
#box {
  background: black;
  border: 2px solid white;
  height: 30px;
  width: 30px;
  box-shadow: 0px 0px 30px 10px blue;
  -border-radius: 999px;
  will-change: transform;
}

JavaScript

const fpsMeterDiv = document.getElementById('fpsMeter');

const REFRESH_RATE = 2; //fps

const fpsTick = microFps(info => {
  //update DOM with the current fps
  fpsMeterDiv.innerHTML = JSON.stringify(info, null, 2);

}, REFRESH_RATE);


// Demo animation loop
var x = 0;

function loop() {
  fpsTick(); //call on every frame


  //some animation
  const boxW = 30;
  const canvasW = 300;
  const motionDia = canvasW-boxW-7;
  const offset = (motionDia/2) - (boxW/2) + (canvasW-motionDia)/2;
  const tFactor = 100;
  const rFactor = tFactor/2;
  box.style.transform = `translate(${motionDia/2*Math.cos(x/tFactor)+offset}px, ${motionDia/2*Math.sin(x/tFactor)+offset}px) rotate(${-x/rFactor}rad)`;
  x++;

  //setTimeout(loop, 1000/60);
}
setInterval(loop, 1000/60);