Skeleton Mammoth - solving the problem of Skeleton Loaders
summary
A reusable library called Skeleton Mammoth provides pure CSS, no JS skeleton loaders that activate with a single class and two element classes (SM loading and SM item primary/secondary), compiles from SCSS to lightweight CSS, and supports data-sm-config JSON attributes for theme, animation (wave, wave-reverse, pulse, none) and opacity. It preserves component layout, honors prefers-color-scheme and prefers-reduced-motion, exposes root CSS variables for full customization, and demonstrates working card demos with smooth transitions and screen-reader hints.
AI-written summary · about
chapters (24)
- 0:00intro
- 0:22preamble
- 0:38about aleksandr
- 0:55introdution to skeleton mammoth
- 1:23what are skeleton loaders?
- 1:52skeleton loaders examples
- 2:02why do you have to use skeleton loaders?
- 2:52problems of most existing skeletons
- 4:16skeleton loader alternatives
- 4:36spinner
- 5:30progress bar
- 6:46the absence of any visuals
- 7:12creating versatile and reusable skeleton loader
- 10:30root variables. colors
- 10:59root variables. animations
- 11:09base styles
- 13:17advanced features
- 13:28color scheme
- 13:46reduced motion
- 14:17configuration
- 15:45advanced usage
- 16:42demo
- 18:13let's wrap it up!
- 19:22thanks
related talks
36m10 Commandments for Efficient CSS Architecture
38mSvelte in Motion
11mA Safari Through Code: Exploring Panda CSS
56mModern CSS For Dynamic Component-Based Architecture
09mWriting Modular CSS with CSS modules
12mOh No! Spaghetti Code!
43mRolling Your Own CSS Methodology
05m5 Animations You Should Know and Use