Skeleton Loader Generator
Generate skeleton placeholder loaders with an animated shimmer, adjustable lines, avatar and radius. Copy the HTML + CSS — runs entirely in your browser.
HTML + CSS
<div class="skeleton">
<div class="skeleton-avatar"></div>
<div class="skeleton-body">
<div class="skeleton-line" style="width:100%"></div>
<div class="skeleton-line" style="width:93%"></div>
<div class="skeleton-line" style="width:60%"></div>
</div>
</div>
<style>
.skeleton{display:flex;gap:16px;align-items:flex-start;max-width:420px;}
.skeleton-body{flex:1;display:flex;flex-direction:column;gap:12px;}
.skeleton-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(90deg, #e2e8f0 25%, #e2e8f066 37%, #e2e8f0 63%);background-size:400% 100%;animation:skeleton-shimmer 1.4s ease infinite;}
.skeleton-line{height:14px;border-radius:8px;background:linear-gradient(90deg, #e2e8f0 25%, #e2e8f066 37%, #e2e8f0 63%);background-size:400% 100%;animation:skeleton-shimmer 1.4s ease infinite;}
@keyframes skeleton-shimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}
</style>Advertisement
About this tool
Generate skeleton placeholder loaders with an animated shimmer, adjustable lines, avatar and radius. Give users a sense of progress while content loads.
Common use cases
- Show a content placeholder before data arrives
- Build a shimmering card or list skeleton
- Copy the HTML and CSS into any framework