# Intro

Upload your own SVG shape or logo and select from pre-designed animations to create a unique and personalized loading icon for your website.

<figure><img src="/files/Oh4z4MHiqcNOkcaB6zwm" alt=""><figcaption></figcaption></figure>

Convert any SVG shape into an outline loader just like this! There's a handful of preset animation you can choose from. You can even animate more complex shapes like the one below:

<figure><img src="/files/STCnrUfsETZakmuhFrhc" alt=""><figcaption></figcaption></figure>

On top of animating outlines, you can also use it for regular SVG icons too:

<figure><img src="/files/xfmGUbSApVKRKi59j3G4" alt=""><figcaption></figcaption></figure>

### Features

* Upload your own SVG shape to use as a loading icon.
* Add an animation stroke to your SVG shape
* Option to turn the animation into a fullscreen loader that displays when the page is loaded
* Automatically hide after a given amount of time
* Ending animations to animate the "hiding" of the icon
* Choose from a list of pre-designed animations that's always growing (or suggest your own to have it added!)
* Customize animation, stroke, color, speed, and more.


---

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