crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Skeleton Component

Browse Source
This commit is contained in:
Belen Curcio
2020-10-15 11:10:07 -03:00
parent 3b7b71422c
commit bf1ffcace9
9 changed files with 163 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
components/ui/Skeleton/Skeleton.module.css Normal file
View File

@@ -0,0 +1,59 @@
.skeleton {
@apply block rounded-md;
&.loaded {
width: unset !important;
}
&:not(.wrapper):not(.show) {
display: none;
}
&::not(.wrapper):not(.loaded) {
background-image: linear-gradient(
270deg,
var(--accents-1),
var(--accents-2),
var(--accents-2),
var(--accents-1)
);
background-size: 400% 100%;
animation: loading 8s ease-in-out infinite;
}
}
.wrapper {
@apply block relative;
&:not(.show)::before {
content: none;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background-image: linear-gradient(
270deg,
var(--accents-1),
var(--accents-2),
var(--accents-2),
var(--accents-1)
);
background-size: 400% 100%;
animation: loading 8s ease-in-out infinite;
}
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}