kopia lustrzana https://github.com/shoelace-style/shoelace
61 wiersze
1.1 KiB
TypeScript
61 wiersze
1.1 KiB
TypeScript
import { css } from 'lit';
|
|
import componentStyles from '~/styles/component.styles';
|
|
|
|
export default css`
|
|
${componentStyles}
|
|
|
|
:host {
|
|
--border-radius: var(--sl-border-radius-pill);
|
|
--color: var(--sl-color-neutral-200);
|
|
--sheen-color: var(--sl-color-neutral-300);
|
|
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.skeleton {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 1rem;
|
|
}
|
|
|
|
.skeleton__indicator {
|
|
flex: 1 1 auto;
|
|
background: var(--color);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.skeleton--sheen .skeleton__indicator {
|
|
background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));
|
|
background-size: 400% 100%;
|
|
background-size: 400% 100%;
|
|
animation: sheen 8s ease-in-out infinite;
|
|
}
|
|
|
|
.skeleton--pulse .skeleton__indicator {
|
|
animation: pulse 2s ease-in-out 0.5s infinite;
|
|
}
|
|
|
|
@keyframes sheen {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
to {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.4;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
`;
|