93 lines
4.5 KiB
Plaintext
93 lines
4.5 KiB
Plaintext
component Skeleton {
|
|
props {
|
|
color: string = "primary"
|
|
label: string = "Loading"
|
|
size: string = "md"
|
|
lines: number = 3
|
|
class: string = ""
|
|
}
|
|
view {
|
|
<div class="wrn-skeleton-component {class}" data-color="{color}" data-size="{size}" role="status" aria-label="{label}" aria-busy="true" data-wrn-owner="Skeleton" data-wrn-part="root" data-wrn-component="Skeleton" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
|
<div class="wrn-skeleton-component__head" aria-hidden="true" data-wrn-owner="Skeleton" data-wrn-part="head" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
|
<span class="wrn-skeleton-component__avatar" data-wrn-owner="Skeleton" data-wrn-part="avatar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
|
|
<span class="wrn-skeleton-component__heading" data-wrn-owner="Skeleton" data-wrn-part="heading" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
|
<span class="wrn-skeleton-component__bar wrn-skeleton-component__bar--title" data-wrn-owner="Skeleton" data-wrn-part="bar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
|
|
<span class="wrn-skeleton-component__bar wrn-skeleton-component__bar--meta" data-wrn-owner="Skeleton" data-wrn-part="bar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
|
|
</span>
|
|
</div>
|
|
<div class="wrn-skeleton-component__body" aria-hidden="true" data-wrn-owner="Skeleton" data-wrn-part="body" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
|
{#each Array(lines).fill(0) as line}<span class="wrn-skeleton-component__line wrn-skeleton-component__bar" data-wrn-owner="Skeleton" data-wrn-part="line" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>{/each}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wrn-skeleton-component {
|
|
--wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-text) 11%, var(--wrn-color-surface));
|
|
--wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-text) 3%, var(--wrn-color-surface));
|
|
--wrn-skeleton-line: 0.625rem;
|
|
display: grid;
|
|
width: min(100%, 24rem);
|
|
gap: 1rem;
|
|
}
|
|
.wrn-skeleton-component[data-color="primary"] {
|
|
--wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-primary) 17%, var(--wrn-color-surface));
|
|
--wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-primary) 4%, var(--wrn-color-surface));
|
|
}
|
|
.wrn-skeleton-component[data-color="secondary"] {
|
|
--wrn-skeleton-base: color-mix(in srgb, var(--wrn-color-secondary) 17%, var(--wrn-color-surface));
|
|
--wrn-skeleton-shine: color-mix(in srgb, var(--wrn-color-secondary) 4%, var(--wrn-color-surface));
|
|
}
|
|
.wrn-skeleton-component[data-size="xs"],
|
|
.wrn-skeleton-component[data-size="sm"] { --wrn-skeleton-line: 0.5rem; gap: 0.75rem; }
|
|
.wrn-skeleton-component[data-size="lg"],
|
|
.wrn-skeleton-component[data-size="xl"] { --wrn-skeleton-line: 0.75rem; gap: 1.25rem; }
|
|
|
|
.wrn-skeleton-component__head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
.wrn-skeleton-component__avatar {
|
|
width: calc(var(--wrn-skeleton-line) * 4);
|
|
height: calc(var(--wrn-skeleton-line) * 4);
|
|
flex: none;
|
|
border-radius: 999px;
|
|
}
|
|
.wrn-skeleton-component__heading,
|
|
.wrn-skeleton-component__body {
|
|
display: grid;
|
|
flex: 1;
|
|
min-width: 0;
|
|
gap: calc(var(--wrn-skeleton-line) * 0.8);
|
|
}
|
|
|
|
/* Every block shares one shimmer; background-attachment: fixed keeps the
|
|
sweep continuous across blocks instead of restarting per bar. */
|
|
.wrn-skeleton-component__avatar,
|
|
.wrn-skeleton-component__bar {
|
|
display: block;
|
|
background:
|
|
linear-gradient(100deg, transparent 30%, var(--wrn-skeleton-shine) 50%, transparent 70%) 0 0 / 200% 100% fixed,
|
|
var(--wrn-skeleton-base);
|
|
animation: wrn-skeleton-component-shimmer 1.6s ease-in-out infinite;
|
|
}
|
|
.wrn-skeleton-component__bar {
|
|
height: var(--wrn-skeleton-line);
|
|
border-radius: 999px;
|
|
}
|
|
.wrn-skeleton-component__bar--title { width: 55%; height: calc(var(--wrn-skeleton-line) * 1.25); }
|
|
.wrn-skeleton-component__bar--meta { width: 32%; }
|
|
.wrn-skeleton-component__line:last-child:not(:first-child) { width: 64%; }
|
|
|
|
@keyframes wrn-skeleton-component-shimmer {
|
|
from { background-position: 150% 0, 0 0; }
|
|
to { background-position: -50% 0, 0 0; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wrn-skeleton-component__avatar,
|
|
.wrn-skeleton-component__bar { animation: none; }
|
|
}
|
|
}
|
|
}
|