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:
- SMIL animations (both inline and referenced via an
imgtag) won't start playing until the page has completely loaded whereas CSS animations will start playing while the page is loading. - In webkit based browsers, both SMIL and CSS animations, when referenced via an
imgtag, produce an unusual behavior on page zoom levels other than 100%. Using them inline seems completely fine and consistent across browsers.
Preview
Rings
| 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) |
Dots
| 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) |
Bars
| 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) |
Blocks
| 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) |
Pulses
| 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) |
Other
| 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) |
Adaptation
React Component Library by dephraiim
License
MIT © Utkarsh Verma