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	CSS (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)

Preview	CSS (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)

Preview	CSS (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)

Preview	CSS (Size in bytes)	SMIL (Size in bytes)
	CSS (1182)	SMIL (2133)
	CSS (524)	SMIL (1082)
	CSS (646)	SMIL (1579)
	CSS (2457)	SMIL (4106)

Preview	CSS (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)

Preview	CSS (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)

React Component Library by dephraiim

MIT © Utkarsh Verma