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.coffeefile - 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 spinnerViewspinner.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