https://github.com/n3r4zzurr0/svg-spinners

A collection of 24 x 24 dp SVG spinners! (CSS & SMIL)
https://github.com/n3r4zzurr0/svg-spinners

svg-animated-icons

Last synced: 29 days ago
JSON representation

A collection of 24 x 24 dp SVG spinners! (CSS & SMIL)

• Host: GitHub
• URL: https://github.com/n3r4zzurr0/svg-spinners
• Owner: n3r4zzurr0
• License: mit
• Created: 2022-06-11T18:18:16.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-05T06:13:12.000Z (over 1 year ago)
• Last Synced: 2024-10-01T00:41:02.461Z (about 1 month ago)
• Topics: svg-animated-icons
• Language: SVG
• Homepage:
• Size: 170 KB
• Stars: 6,038
• Watchers: 46
• Forks: 819
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
#   SVG Spinners (CSS & SMIL)

All spinners are displayed inside a 24 x 24 dp view box. The main content rests inside the live area of 22 dp with a padding of 1dp.

**Few points to consider:**

1. SMIL animations (both inline and referenced via an `img` tag) won't start playing until the page has completely loaded whereas CSS animations will start playing while the page is loading.

2. In webkit based browsers, both SMIL and CSS animations, when referenced via an `img` tag, produce an [unusual behavior](https://github.com/n3r4zzurr0/svg-spinners/issues/2) on page zoom levels other than 100%. Using them inline seems completely fine and consistent across browsers.




## Preview

Rings
PreviewCSS (Size in bytes)SMIL (Size in bytes)CSS (428)SMIL (384)CSS (531)SMIL (487)CSS (434)SMIL (390)CSS (537)SMIL (493)CSS (483)SMIL (439)CSS (586)SMIL (542)CSS (620)SMIL (739)
Dots
PreviewCSS (Size in bytes)SMIL (Size in bytes)CSS (635)SMIL (686)CSS (482)SMIL (599)CSS (631)SMIL (2973)CSS (409)SMIL (375)CSS (471)SMIL (503)CSS (422)SMIL (459)CSS (948)SMIL (692)CSS (1494)SMIL (2875)CSS (1504)SMIL (2587)CSS (535)SMIL (484)CSS (1693)SMIL (2714)CSS (399)SMIL (357)
Bars
PreviewCSS (Size in bytes)SMIL (Size in bytes)CSS (514)SMIL (625)CSS (895)SMIL (1891)CSS (548)SMIL (1244)CSS (825)SMIL (1891)CSS (1150)SMIL (894)
Blocks
PreviewCSS (Size in bytes)SMIL (Size in bytes)CSS (1182)SMIL (2133)CSS (524)SMIL (1082)CSS (646)SMIL (1579)CSS (2457)SMIL (4106)
Pulses
PreviewCSS (Size in bytes)SMIL (Size in bytes)CSS (301)SMIL (381)CSS (400)SMIL (797)CSS (499)SMIL (1149)CSS (503)SMIL (1135)CSS (461)SMIL (683)CSS (657)SMIL (1361)CSS (853)SMIL (1994)CSS (856)SMIL (1973)
Other
PreviewCSS (Size in bytes)SMIL (Size in bytes)CSS (453)SMIL (870)CSS (565)SMIL (530)CSS (377)SMIL (333)CSS (385)SMIL (341)CSS (774)SMIL (1028)CSS (1064)SMIL (853)CSS (398)SMIL (354)CSS (999)SMIL (1238)CSS (989)SMIL (1172)CSS (1321)SMIL (1276)


## Adaptation

[React Component Library by dephraiim](https://github.com/dephraiim/react-svg-spinners)

## License

MIT © [Utkarsh Verma](https://github.com/n3r4zzurr0)