Untitled

.bigSpinner.useSpinner

.bigSpinner

  background-image: -webkit-canvas(spinner)

.useSpinner

  background-position: center 70%

  background-repeat: no-repeat

  width: 100%

  min-height: 100%

  padding-top: 20%

  -webkit-box-sizing: border-box

  text-align: center

  font-size: 100px

# It's fork from http://cssdeck.com/labs/vvt7yt0d

class BigSpinner

  constructor: (id, color, shadow) ->

    @ctx = document.getCSSCanvasContext("2d", id, 37, 37)

    @ctx.lineWidth = 3

    @ctx.lineCap = "round"

    @ctx.strokeStyle = color

    if shadow

      @ctx.shadowOffsetX = 1

      @ctx.shadowOffsetY = 1

      @ctx.shadowBlur = 1

      @ctx.shadowColor = shadow

    @step = 0

    @timer = null

    return @

  stop: ->

    if @timer

      @ctx.clearRect 0, 0, 37, 37

      clearInterval @timer

      @timer = null

    @

  start: ->

    return @ if @timer

    # 24-30 fps good idea! 

    # It will be smooth :)

    # And cool trick, bind.

    @timer = setInterval(draw.bind(@), 1000 / 24)

    @

  draw = ->

    @ctx.clearRect 0, 0, 37, 37

    @ctx.save()

    @ctx.translate 18, 18

    @ctx.rotate @step * Math.PI / 180

    i = 0

    while i < 12

      @ctx.rotate 30 * Math.PI / 180

      drawLine @ctx, i

      i++

    @ctx.restore()

    @step += 30

    @step = 0  if @step is 360

  drawLine = (ctx, i) ->

    ctx.beginPath()

    ctx.globalAlpha = i / 12

    ctx.moveTo 0, 8 + 1

    ctx.lineTo 0, 16 - 1

    ctx.stroke()

    ctx

spinner = new BigSpinner("spinner", "#666").start()

# Or

#spinner = new BigSpinner("spinner", "#666")

#spinner.start()

# Do work

#spinner.stop()