This Astro package provides you with a collection of loading animations built with pure SVG by the amazing @sherb.
This package is hosted on npm.
npm install astro-svg-loadersOr using yarn
yarn add astro-svg-loadersTo 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 />Please see the changelog for more information on what has changed recently.
Astro SVG Loaders relies heavily on the amazing work Sam Herbert is doing developing: SVG-Loaders , Thanks Sam! ❤️