# Loading Animation

{% hint style="success" %}
**Who can use this feature?**

All Squirrel365 plans include the Loading Animation component. 

For more details, see our [**pricing comparison matrix**](https://squirrel365.io/pricing/).
{% endhint %}

A Loading Animation component applies a visual cue to a project or application to indicate when any particular calculation or transition is occurring behind the scenes.

## Loading Animation Properties

The **Loading Animation** component properties consist of **LAYOUT & POSITION, STYLING,** and **DYNAMIC VISIBILITY** drawers.

This guide will describe all sections besides the [**Layout & Positioning**](https://learn.squirrel365.io/components-functions-and-connections/overview/layout-and-positioning) and [**Dynamic Visiblity**](https://learn.squirrel365.io/getting-started/core-concepts/dynamic-visibility) sections, as these are generic to each component. A separate guide and tutorial for each can be found by clicking the links above.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this [Set Property Values](https://squirrel365.io/knowledgebase/set-property-values/) article for more information on using the different methods.

***

### STYLING

These properties apply to the styling options of the Loading Animation component.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FEjiM93vHlsGgIoFnta7B%2FStyling.png?alt=media&#x26;token=1a2fb780-165d-44e6-8bab-684b7d762ae3" alt="" width="281"><figcaption></figcaption></figure>

* **Animation Style** - expand the dropdown to select an animation style
  * Spinner
  * Dribble
  * Side-step
  * Roadway
  * Inchworm
  * Rain
  * Square Dance
  * Shuffle
  * Firework

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FMxg0qSjqamk5fNHRAnah%2F_animation_types.gif?alt=media&#x26;token=503cfc72-2e5d-4c7e-adef-6f63014d8571" alt="" width="563"><figcaption><p>Start from top-left: Spinner, Dribble, Side-step, Roadway, Inchworm, Rain, Square Dance, Shuffel, Firework</p></figcaption></figure>

* **Fill** - a property to change the color of the loading animation component
* **Opacity** - a property to control the opacity of the loading animation component
* **Block mouse events** - check this property to disable any mouse events from triggering underneath the component when it is visible on the canvas.