> For the complete documentation index, see [llms.txt](https://devopanda.gitbook.io/svg-loader-progress-bar/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devopanda.gitbook.io/svg-loader-progress-bar/intro.md).

# 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="https://4179523371-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM38dnKJoJwTpiFUUZp9z%2Fuploads%2FNxyjk7Eojg9DmFaF9DlE%2FboltLogo.gif?alt=media&amp;token=a5e3649c-9466-4232-8083-14377bdfffcb" 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="https://4179523371-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM38dnKJoJwTpiFUUZp9z%2Fuploads%2FR4SEywwX6lunz6ub3Gwo%2Fsequences.gif?alt=media&amp;token=5e6121f8-508c-4441-8afa-606140b2f882" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://4179523371-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM38dnKJoJwTpiFUUZp9z%2Fuploads%2FIGGYJmVuMN8kXSt0zV0V%2Fpandas.gif?alt=media&amp;token=7437075e-5b90-4863-b8a4-1b2a4a860b45" 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.