Skip to content

Latest commit

 

History

History

astro-svg-loaders

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
CHANGELOG.md
CHANGELOG.md
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 
tsup.config.ts
tsup.config.ts
 
 

README.md

🚀 Astro SVG Loaders

version downloads github actions typescript makepr

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 />

Change log

Please see the changelog for more information on what has changed recently.

Acknowledgements

Astro SVG Loaders relies heavily on the amazing work Sam Herbert is doing developing: SVG-Loaders , Thanks Sam! ❤️