Skip to content

Loading Spinners

Pablo Mayobre edited this page Mar 24, 2015 · 1 revision

Spinners

Spinners are a good way to display something is loading, the animation introduced in Material Design is also really good, that is why it was crying to be part of Material-Love, and so it is!

Spinner animation

Usage

Require spinner.lua

You can use this really easily, just require the spinner.lua file into your project

local spinner = require "material-love.libs.spinner"

Create a new spinner

Create a new spinner object

local spin = spinner.new(radius, width, speed, precision)
  • radius: The internal radius of the spinner
  • width: The width of the line of the spinner (default 1)
  • speed: The speed at which the spinner spins (default 1)
  • precision: The number of segments used to draw the full circle (default 100)

Update the spinner

Update the spinner object each frame, there are two ways to do this, through the spinner.update function

    spinner.update(spin,dt)

or using the spinner object update method

love.update = function (dt)
    spin:update(dt)
end

Draw it

Then you just need to draw it, again you have two options, the spinner.draw function

love.draw = function ()
    spinner.draw(spin,x,y,rotation,sx,sy)
end

or the object draw method`

love.draw = function ()
    spin:draw(x,y,rotation,sx,sy)
end
  • x,y: The x and y coordinates of the spinner center
  • rotation: The spinner rotation angle, in radians (default 0)
  • sx,sy: The scale in the x and y axis (default 1 / sx)

Trick!

You can increment the width of the spinner by changing the width field of the object

spin.width = newwidth

Files

The only require file is libs/spinner.lua

Clone this wiki locally