Transitions
Transition patterns connect elements and views, and skeleton loaders hold space while content loads.
The six transition patterns (container transform, forward and backward, lateral, top level, enter and exit, and skeleton loaders) are helper functions and classes. See Motion for the helpers.
Skeleton loaders
Link to “Skeleton loaders”A skeleton hints at where content will appear and holds its space while it
loads. Set loading and clear it when the content is ready.
<md-gb-skeleton loading shape="text"></md-gb-skeleton>
<md-gb-skeleton id="card" loading>
<p>Content that loads.</p>
</md-gb-skeleton>
<md-gb-button id="done" color="tonal">Finish loading</md-gb-button>import '@material/web/labs/gb/styles/motion/transitions/md-gb-skeleton.js';
document.querySelector('#done').addEventListener('click', () => {
document.querySelector('#card').loading = false;
});