Loading placeholders shaped like the things they stand in for.
Every read-heavy dapp needs these; pairing each atom with a skeleton of the same silhouette keeps layouts from jumping when data lands. All shimmer and color comes from your CSS -- the classes are the whole API:
.web3-skeleton {
background: linear-gradient(90deg, #222 25%, #333 50%, #222 75%);
background-size: 200% 100%;
animation: web3-shimmer 1.4s infinite;
border-radius: 4px;
}
@keyframes web3-shimmer {
to { background-position: -200% 0; }
}Each helper renders a <span> (or <div> for block) that is
aria-hidden -- the loading announcement belongs on the container (see
Web3.Ui.RemoteCall.view, which sets aria-busy), not on each bone.
CSS classes: web3-skeleton, plus a shape modifier --
web3-skeleton--line, --block, --circle, --pill, --address,
--amount.
A rectangular area placeholder (cards, charts).
A circular placeholder (identicons, token logos).
A rounded chip placeholder (badges, buttons).
Sized like a truncated address (0x1234...abcd).
Sized like a token amount.
A one-line text placeholder.