Skip to content

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

License

Notifications You must be signed in to change notification settings

bayoudh-socrate/svg-spinners

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

  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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • SVG 100.0%