Shimmer List Loader
A list placeholder with shimmering avatar and text rows — the classic content-loading state.
<div class="shim"><div class="shim-row"><div class="shim-av"></div><div class="shim-lines"><div class="shim-l w60"></div><div class="shim-l w40"></div></div></div><div class="shim-row"><div class="shim-av"></div><div class="shim-lines"><div class="shim-l w70"></div><div class="shim-l w50"></div></div></div><div class="shim-row"><div class="shim-av"></div><div class="shim-lines"><div class="shim-l w50"></div><div class="shim-l w30"></div></div></div></div>body{background:#f6f7fa}
.shim{width:320px;background:#fff;border:1px solid #eceef3;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:16px}
.shim-row{display:flex;align-items:center;gap:14px}
.shim-av{width:48px;height:48px;border-radius:50%;flex:none}
.shim-lines{flex:1;display:flex;flex-direction:column;gap:9px}
.shim-l{height:12px;border-radius:6px}
.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}
.shim-av,.shim-l{background:linear-gradient(90deg,#eceef3 25%,#f6f8fc 50%,#eceef3 75%);background-size:200% 100%;animation:sh 1.3s infinite}
@keyframes sh{to{background-position:-200% 0}}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.