https://github.com/SamHerbert/SVG-Loaders

Loading icons and small animations built with pure SVG.
https://github.com/SamHerbert/SVG-Loaders

Last synced: 14 days ago
JSON representation

Loading icons and small animations built with pure SVG.

• Host: GitHub
• URL: https://github.com/SamHerbert/SVG-Loaders
• Owner: SamHerbert
• License: mit
• Created: 2014-11-20T01:33:16.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2023-07-25T11:09:28.000Z (over 1 year ago)
• Last Synced: 2024-04-14T10:14:41.063Z (7 months ago)
• Language: HTML
• Homepage: http://samherbert.net/svg-loaders
• Size: 58.6 KB
• Stars: 6,656
• Watchers: 131
• Forks: 4,025
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-loading-indicators - SVG-Loaders - Loading icons and small animations built with pure SVG. (SVG)

README

        
Example

===========

All loaders may be previewed at:

http://samherbert.net/svg-loaders

NOTE: Chrome 45 intended to deprecate SMIL icons but has since [suspended](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5o0yiO440LM%5B126-150%5D) that deprecation.

Usage

===========

[Download](https://github.com/SamHerbert/SVG-Loaders/archive/master.zip) or `bower install svg-loaders`

```html



```

An icon's color can be manipulated by changing the `fill` attribute in the SVG file.

```

```

Note: Not all browsers support SVG, or more specifically, animated SVGs. Check (http://caniuse.com/#feat=svg-smil) to make sure you're good to go. If not, you may want to implement a fallback.

Minify

===========

All SVG files are fairly small in size, but you can make them even smaller by minifying with something like [SVGO](https://github.com/svg/svgo).

Adaptations

===========

[React components by ajwann](https://github.com/ajwann/svg-loaders-react)