I built this spinner module so you can easily integrate it in your prototypes: See it in Action
This spinner is inspired by the spinner from Skype. Thank you Travis Kirton for sharing this tutorial
- Download the
spinner.coffee
file - Create or open a framer project and drop spinner.coffee inside the /modules folder
- Add `{spinnerView} = require 'spinner' at the top of your document (case-sensitive).
spinner = new spinnerView
spinner.start()
spinner.stop()
You can also customize the spinner and its background with following properties:
property | Description |
---|---|
dotSize |
The size of each dot in the animation (default: 40) |
dotColor |
The color of the dots (default: "#fff") |
loaderHeight |
Size of the spin animation |
hasBackgroundColor |
Backdrop color of the animation. If not set there is no backgroundcolor (default: "") |
backgroundOpacity |
Backdrop opacity (default: 1) |
spinner = new spinnerView
dotSize: 200
dotColor: "#ccc"
loaderHeight: 300
hasBackgroundColor: "#641EFE"
backgroundOpacity: 0.5