# Mojo.Widget.Spinner

## Namespace Detail

### Overview

The Spinner widget provides all spinner behavior. Use the spinner to indicate that activity is taking place. The framework uses it as part of the activity button type, and you'll see it in many of the core applications. There are two sizes: the large Spinner is 128 pixels wide (and high) and the small Spinner is 32 pixels. (These dimensions are for the Pre screen and may vary on other devices, but the proportions and fit within the UI will be maintained.) All attribute properties are optional, but the `spinnerSize` is commonly used; set it to "large", the default, or "small". To start the Spinner, set its model property (default name is 'spinning') to `true`; to stop it, set the property to `false`.

### Declaration

>     <div x-mojo-element="Spinner" id="spinnerId" class="spinnerClass"
>       name="spinnerName"></div>

Properties | Required | Value | Description
--- | --- | --- | ---
x-mojo-element | Required | Spinner | Declares the widget as type 'Spinner'.
id | Required | Any String | Identifies the widget element for use when instantiating or rendering.
class | Optional | Any String | Spinner uses .palm-spinner-container by default, but you can override this setting.
name | Optional | Any String | Adds a unique name to the Spinner widget; generally used in templates.

### Events

The Spinner widget has no events.

### Instantiation

>     this.controller.setupWidget("spinnerId",
>       this.attributes = {
>           spinnerSize: "large"
>       },
>       this.model = {
>           spinning: false
>       }
>     );

### Attribute Properties

Attribute Property | Type | Required | Default | Description
--- | --- | --- | --- | ---
property | String | Optional | spinning | DEPRECATED Name of model property for this widget instance
modelProperty | String | Optional | spinning | Name of model property for this widget instance; default is "spinning".
spinnerSize | String | Optional | Mojo.Widget.spinnerSmall | Either Mojo.Widget.spinnerLarge or Mojo.Widget.spinnerSmall (small=32 or large=128).
superClass | String | Optional | .palm-activity-indicator | Specifies the CSS class name for the background image when you specify a custom.
startFrameCount | Integer | Optional | None | If the spinner widget is in custom mode, this specifies the number of frames allocated to the pre-main loop animation.
mainFrameCount | Integer | Optional | 10 | If the spinner widget is in custom mode, this specifies the number of frames allocated to the main loop animation.
finalFrameCount | Integer | Optional | None | If the spinner widget is in custom mode, this specifies the number of frames allocated to the post-main loop animation.
frameHeight | Integer | Optional | small | Explicitly sets the frame height of the animation (small=32 or large=128).
fps | Integer | Optional | 10 | Number of frames per second

### Model Properties

Model Property | Type | Required | Default | Description
--- | --- | --- | --- | ---
spinning | Boolean | Required | false | Spinner state; true is spinning.

### Methods

To invoke a method on a widget, use the scene controller's `get` method for the desired widget, and append `mojo` followed by the method.

Example:

>     this.controller.get('myWidget').mojo.getValue()

Method | Arguments | Description
--- | --- | ---
start | None | Starts the spinner.
stop | None | Stops the spinner.
toggle | None | Changes the spinner state (spinning to not, stopped to spinning).