html, body {
  background: #ffffff;
}

.loader {
  position: absolute;
}

.container {
/*  height: 500px;
  width: 500px; */
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

let showLoader = true
window.onload = () => {
  size = 48 * 3; // size of the loader in points
  if(showLoader) {
    canvas = document.getElementsByClassName("loader")[0];

  /////////////////////////////////////
  // Canvas Crap for retina
  /////////////////////////////////////
  scaleRatio = window.devicePixelRatio;
  canvasHeight = size;
  canvasWidth = size;

  canvas.width = canvasWidth * scaleRatio;
  canvas.height = canvasHeight * scaleRatio;
  canvas.style.width = canvasWidth + "px";
  canvas.style.height = canvasHeight + "px";
  canvas.style.left = "50%";
  canvas.style.top = "50%";
  canvas.style.marginLeft = -(canvas.width / 2) / scaleRatio + "px";
  canvas.style.marginTop = -(canvas.height / 2) / scaleRatio + "px";

  context = canvas.getContext("2d");
  context.scale(scaleRatio, scaleRatio);

  /////////////////////////////////////
  // Constants
  // Lissajous figures are some of the most interesting parametrized curves.
  // A Lissajous figure has the following parametrization:
  // x = cos at
  // y = sin bt
  // where a and b are positive integers and t ranges over the interval [0, 2π).
  // Lissajous figures can be generated on an oscilloscope from two sinusoidal inputs of different frequencies.
  // When a=b, the figure is a circle.
  /////////////////////////////////////

  t = 0; // Time
  a = 3; // a
  b = 2; // b
  r = size / 4; // radius in points
  tau = 2 * Math.PI; // because Tau is greater than Pi
  centerX = canvasHeight / 2;
  centerY = canvasWidth / 2;
  numberOfDots = 100; // sample (definition) of the curve. Higher numbers means shorter line between points, so smoother curve.

  /////////////////////////////////////
  // Trigger the redraw functin every 16ms (60fps)
  /////////////////////////////////////
  window.requestAnimationFrame(draw);
}

function draw(timestamp) {
  context.save();
  context.clearRect(0, 0, canvasWidth, canvasHeight);

  // The Lissajous curve using the Constants defined above
  var x = Math.cos(a * t) * r + centerX;
  var y = Math.sin(b * t) * r + centerY;

  context.lineCap = "round";
  context.lineJoin = "round";

  // Except if it's the first point, draw a segment between the previous point and the current point 
  for (i = 0; i <= numberOfDots; i++) {
    context.beginPath();
    brightness = Math.round(255 - (i / numberOfDots) * 255);
    context.strokeStyle = "rgb(" + brightness + ", " + brightness + ", " + brightness + ")";
    context.lineWidth = (i / numberOfDots) * (size / 24);
    context.moveTo(x, y);

    if (i > 0) {
      var offset = timestamp * 0.001;
      t = timestamp * 0.0015 + (i / numberOfDots) * tau;
      x = Math.cos(a * t + offset) * r + centerX;
      y = Math.sin(b * t) * r + centerY;
      context.lineTo(x, y);
      context.stroke();
    }

  }
  // console.log(timestamp);
  context.restore();
  window.requestAnimationFrame(draw);
}
}