# samherbert/svg-loaders

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/samherbert-svg-loaders).**

7,017 stars · 4,756 forks · HTML · MIT

## Links

- GitHub: https://github.com/SamHerbert/SVG-Loaders
- Homepage: http://samherbert.net/svg-loaders
- awesome-repositories: https://awesome-repositories.com/repository/samherbert-svg-loaders.md

## Description

SVG-Loaders is a library of animated SVG icons designed to signal ongoing activity while content loads in a web interface. The project provides lightweight, scalable loading animations built entirely with pure SVG markup, requiring no external JavaScript dependencies or raster images.

The library focuses on delivering visual feedback through inline SVG animations, using CSS keyframes or SMIL to animate elements directly within the HTML document. Each loader's fill color can be customized by changing the SVG's fill attribute, allowing the icons to match the interface design. The animations are driven by declarative CSS or SVG attributes rather than imperative scripts, simplifying state management and playback control.

The collection covers a range of animated loading indicators, from spinners to other activity signals, all rendered as scalable vectors for minimal file size. The project's documentation and installation surface provide straightforward guidance for integrating these icons into web projects.

## Tags

### Part of an Awesome List

- [Loading Animations](https://awesome-repositories.com/f/awesome-lists/devtools/svg-animation-libraries/loading-animations.md) — Provides animated SVG icons that signal ongoing activity while content loads in a web interface.
- [Loading Animations](https://awesome-repositories.com/f/awesome-lists/devtools/animation-and-transitions/loading-animations.md) — Animates SVG icons to signal ongoing activity while content loads in a web interface. ([source](http://samherbert.net/svg-loaders))
- [Inline SVG Animations](https://awesome-repositories.com/f/awesome-lists/devtools/svg-animation-libraries/inline-svg-animations.md) — Animates SVG elements directly within the HTML document using CSS keyframes or SMIL without external scripts.
- [Pure SVG Animations](https://awesome-repositories.com/f/awesome-lists/devtools/svg-animation-libraries/pure-svg-animations.md) — Creates lightweight, scalable loading animations using only SVG markup without external dependencies.
- [Vector and SVG](https://awesome-repositories.com/f/awesome-lists/devtools/vector-and-svg.md) — Collection of SVG-based loading animations.

### User Interface & Experience

- [Declarative Animations](https://awesome-repositories.com/f/user-interface-experience/declarative-animations.md) — Defines animations through CSS or SVG attributes rather than imperative JavaScript, simplifying state management.
- [Visual Process Feedback](https://awesome-repositories.com/f/user-interface-experience/visual-process-feedback.md) — Provides visual feedback to users during content loading or background processes in a web application.