loader

by aio350

HTML

<canvas width="300" height="300"></canvas>

CSS

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

const canvasLoader = function() {
  const self = this

  self.init = function() {
    self.canvas = document.querySelector('canvas')
    self.$ = self.canvas.getContext('2d')
    self.$.lineWidth = .5
    self.$.strokeStyle = 'rgba(0, 0, 0, .75)'
    self.count = 75
    self.rotation = 270 * (Math.PI / 180)
    self.speed = 6
    self.canvasLoop()
  }

  self.updateLoader = function() {
    self.rotation += self.speed / 100
  }

  self.renderLoader = function() {
    self.$.save()
    self.$.globalCompositeOperation = 'source-over'
    self.$.translate(150, 150)
    self.$.rotate(self.rotation)
    let i = self.count
    while (i--) {
      self.$.beginPath()
      self.$.arc(0, 0, i + (Math.random() * 35), Math.random(), Math.PI / 3 + (Math.random() / 12))
      self.$.stroke()
    }
    self.$.restore()
  }

  self.canvasLoop = function() {
    requestAnimationFrame(self.canvasLoop, self.c)
    self.$.globalCompositeOperation = 'destination-out'
    self.$.fillStyle = 'rgba(0,0,0,.03)'
    self.$.fillRect(0, 0, 300, 300)
    self.updateLoader()
    self.renderLoader()
  }
}

const loader = new canvasLoader()
loader.init()