Astro-svg-loaders NPM

🚀 Astro SVG Loaders

This Astro package provides you with a collection of loading animations built with pure SVG by the amazing @sherb.

📦 Installation

This package is hosted on npm.

npm install astro-svg-loaders

Or using yarn

yarn add astro-svg-loaders

🥑 Usage

To add a loading indicator in any of your Astro pages or components, just import a loader from astro-svg-loaders then use it inside the your HTML:

---
import { SpinningCircles } from "astro-svg-loaders"
---

<html lang="en">
    <body>
        // renders a spining cercle animation
        <p>Please wait while content is loading</p>
        <SpinningCircles />
    </body>
</html>

List of all available loaders:

Note
You can check a demo of all the available animations here

// renders all available loader animations
<Audio />
<BallTriangle />
<Bars />
<Circles />
<Grid />
<Hearts />
<Oval />
<Puff />
<Rings />
<SpinningCircles />
<TailSpin />
<ThreeDots />