# LoadingBottle

> The LoadingBottle component is a creative SVG-based loading animation that visually represents the outline of a bottle being “drawn” over time. It uses an SVG <path> element combined with a stroke-dasharray and stroke-dashoffset animation to create a smooth tracing effect, making it look as though the bottle is gradually filling in or coming to life. This animation loops continuously, providing an engaging and lightweight visual indicator during loading states. Its minimalistic design and vector-based implementation ensure that it scales cleanly on any screen size, making it ideal for use in modern web applications that want to add a fun, distinctive touch to their loading experience.

- Author: [ruhith](https://21st.dev/@ruhith369)
- License: unknown
- Live preview: https://21st.dev/@ruhith369/components/loading-bottle

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruhith369/loading-bottle?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt