Shadowgraph
TrendingBuzzResearch
Chrome extension
Sign in

n3r4zzurr0/svg-spinners

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

SVG

7,016

28 commits

updated May 5, 2023

See the code

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

License

MIT © Utkarsh Verma

svg-animated-icons

Significant stargazers

(top 24 of 60)

Linus Unnebäck

1,061 followers · starred May 2023

Hiroki Osame

3,979 followers · starred Mar 2023

fisker Cheung

557 followers · starred Jun 2022

Manuel Spigolon

465 followers · starred Jul 2023

Similar repos

danklammer/bytesize-icons

Tiny style-controlled SVG iconset (101 icons, 12kb)

3,912

vineethtrv/css-loader

This is a library having a collection of different types of CSS loaders, spinners

1,735

epicmaxco/epic-spinners

Easy to use css spinners collection with Vue.js integration

3,912

tobiasahlin/SpinKit

A collection of loading indicators animated with CSS

19,323

gian-gg/icon-marquee

Dynamic SVG icon marquees for READMEs, portfolios, and web pages.

30

simple-icons/simple-icons

SVG icons for popular brands

25,999

lukehaas/css-loaders

A collection of loading spinners animated with CSS

7,051

edent/SuperTinyIcons

Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos

15,399

n3r4zzurr0/svg-spinners

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

SVG

7,016

28 commits

updated May 5, 2023

See the code

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

License

MIT © Utkarsh Verma

svg-animated-icons

Significant stargazers

(top 24 of 60)

Linus Unnebäck

1,061 followers · starred May 2023

Hiroki Osame

3,979 followers · starred Mar 2023

fisker Cheung

557 followers · starred Jun 2022

Manuel Spigolon

465 followers · starred Jul 2023

Similar repos

danklammer/bytesize-icons

Tiny style-controlled SVG iconset (101 icons, 12kb)

3,912

vineethtrv/css-loader

This is a library having a collection of different types of CSS loaders, spinners

1,735

epicmaxco/epic-spinners

Easy to use css spinners collection with Vue.js integration

3,912

tobiasahlin/SpinKit

A collection of loading indicators animated with CSS

19,323

gian-gg/icon-marquee

Dynamic SVG icon marquees for READMEs, portfolios, and web pages.

30

simple-icons/simple-icons

SVG icons for popular brands

25,999

lukehaas/css-loaders

A collection of loading spinners animated with CSS

7,051

edent/SuperTinyIcons

Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos

15,399