# Animation settings

## Fullscreen loader

The fullscreen loader will cover up the entire screen while the page is loading. 

{% hint style="warning" %}
If you use this option, make sure to include a way to end the animation (either with auto-hiding or using a bubble workflow to stop the animation once loaded).
{% endhint %}

## Animation options

To see the animation options in action, check out the [demo page here](https://svg-progress-bar.bubbleapps.io/version-test). 

<table><thead><tr><th width="175">Animation</th><th width="475">Description</th><th>Type</th></tr></thead><tbody><tr><td>Draw</td><td>Animates a stroke outline to the SVG</td><td>Outline</td></tr><tr><td>Draw spin</td><td>Animates a stroke outline to the SVG and then spins it 360 degrees</td><td>Outline</td></tr><tr><td><del>Jump draw</del></td><td>Draws the stroke of the SVG and then makes it bounce up and down</td><td>Outline</td></tr><tr><td></td><td></td><td></td></tr><tr><td>Draw sequence</td><td>Draws each section of the SVG with a delay between each</td><td>Multi-Outline</td></tr><tr><td>Sequence draw spin</td><td>Same as Draw sequence, but also adds a spin</td><td>Multi-Outline</td></tr><tr><td></td><td></td><td></td></tr><tr><td>Spin</td><td>Spins the SVG 360 degrees</td><td>Static</td></tr><tr><td>Pulse</td><td>Makes the SVG pulse by increasing and decreasing its size</td><td>Static</td></tr><tr><td>Heartbeat</td><td>SVG beats quickly once every second</td><td>Static</td></tr><tr><td>Jump</td><td>Makes the SVG bounce up and down</td><td>Static</td></tr><tr><td><del>Jump rotate</del></td><td>Makes the SVG jump and then rotates it on its side</td><td>Static</td></tr></tbody></table>

We don't currently offer the option to create your own custom animations, however if you have an idea for an animation you want to add, I'm always looking to add new animation options! To request an animation, make a post on the support forum here.

## Controlling your animation with workflows

<figure><img src="https://4179523371-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM38dnKJoJwTpiFUUZp9z%2Fuploads%2FzR2E565kJiyPvTnj9N3l%2FScreen%20Shot%202023-02-23%20at%202.48.58%20PM.png?alt=media&#x26;token=1ba0e490-afe6-4494-a1c0-b453a3c867dd" alt=""><figcaption></figcaption></figure>

There are 2 actions available: **Animate** and **control**.&#x20;

### Animate

Start your animation. If you have "auto-start" set to false, this is how you can start the animation. You're able to set the animation, stroke, and opacity.&#x20;

You can define the animation used here - Leave blank to use the default animation. Animation name must be from the [list of animations above](#animation-options).

### Control

Play, pause, seek, and stop your animation.

**Stop after loop**: Wait until the animation finishes its current loop, then runs the "finishing animation" set in the settings panel.&#x20;

**Stop now**: Does not wait for the loop to finish, and immediately runs the stopping animation. (you can set the animation to "none" to make this immediate)&#x20;


---

# 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://devopanda.gitbook.io/svg-loader-progress-bar/animation-settings.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.