Add spinner GIF overlays in demo while output generates

[ccpandhare]

There are four types events that are triggered in a step's life cycle :

• onSetup : triggered when a step is added to the sequencer
• onDraw : triggered when the step starts to draw
• onComplete : triggered when the step completes drawing
• onRemove : triggered when the step is removed

Reference : README.md#creating-a-user-interface

So, between the onDraw and onComplete events, the step's output is being drawn. In the web demo, It would be a good idea to overlay the current output of the step with a "loading" GIF to let the user know that the output is still being generated.

[jywarren]

This could be implemented nicely in the demo using onDraw and onComplete event handlers in this file:

https://github.com/publiclab/image-sequencer/blob/master/examples/demo.js#L79

It doesn't have an onDraw so that could be added. It does have an onComplete though. Be sure your insertion and deletion uses a unique ID so that it doesn't operate on all the steps, just the one that's running now.

The spinner itself could just be <i class="step-1 fa fa-spinner fa-spin"></i> from FontAwesome: http://fontawesome.io/icons/

(where step1 is the unique id)

[jywarren]

Fixed in #143, #149.