49 lines
1.6 KiB
Plaintext
49 lines
1.6 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}">
|
|
{#each Array(lines).fill(0) as line}<span class="wrn-skeleton-component__line"></span>{/each}
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wrn-skeleton-component {
|
|
--wrn-skeleton-highlight: var(--wrn-color-border);
|
|
display: grid;
|
|
width: min(100%, 24rem);
|
|
gap: 0.55rem;
|
|
}
|
|
|
|
.wrn-skeleton-component[data-size="xs"] { gap: 0.35rem; }
|
|
.wrn-skeleton-component[data-size="lg"],
|
|
.wrn-skeleton-component[data-size="xl"] { gap: 0.75rem; }
|
|
.wrn-skeleton-component[data-color="secondary"] { --wrn-skeleton-highlight: var(--wrn-color-secondary-soft); }
|
|
.wrn-skeleton-component[data-color="primary"] { --wrn-skeleton-highlight: var(--wrn-color-primary-soft); }
|
|
|
|
.wrn-skeleton-component__line {
|
|
height: 0.8rem;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg, var(--wrn-color-surface-2), var(--wrn-skeleton-highlight), var(--wrn-color-surface-2));
|
|
background-size: 200% 100%;
|
|
animation: wrn-skeleton-component-shimmer 1.4s infinite;
|
|
}
|
|
|
|
.wrn-skeleton-component__line:last-child { width: 68%; }
|
|
|
|
@keyframes wrn-skeleton-component-shimmer {
|
|
from { background-position: 200% 0; }
|
|
to { background-position: -200% 0; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wrn-skeleton-component__line { animation: none; }
|
|
}
|
|
}
|
|
}
|