Skeleton Loader
Placeholder shimmer UI while async content loads, swapped via data-render.
Live Demo
AC
Alice Chen
Deployed auth-service v2.4.1 to production cluster.
2 minutes ago
BM
Bob Martinez
Merged PR #428: add retry logic to payment gateway.
15 minutes ago
Source
HTML + JavaScript
<div data-component="skeleton-loader">
<button data-action="reload">Reload</button>
<!-- Skeleton: removed from DOM when loading is false -->
<div data-render="loading">
<div class="skeleton-circle"></div>
<div class="skeleton-line short"></div>
<div class="skeleton-line"></div>
<div class="skeleton-line medium"></div>
</div>
<!-- Real content: inserted into DOM when loaded -->
<div data-render="!loading">
<p>Actual content here.</p>
</div>
</div>
<script>
wildflower.component('skeleton-loader', {
state: { loading: true },
init() { this._load(); },
_load() {
this.loading = true;
setTimeout(() => { this.loading = false; }, 1500);
},
reload() { this._load(); }
});
</script>Key Points
data-render(notdata-show) removes the skeleton from the DOM entirely once loaded. Better for memory than hiding with CSSdata-render="!loading"inserts real content only after the load completes- The shimmer animation is pure CSS (
@keyframes+background-size), no JS animation needed init()starts the load automatically when the component initializes