diff --git a/README.md b/README.md index 3d2ba91..8de4a9f 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,8 @@ All spinners are displayed inside a 24 x 24 dp view box. The main content rests 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)