> 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="/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.