# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.squirrel365.io/components-functions-and-connections/overview/media/loading-animation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.