crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-24 10:41:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: Skeleton Common

Browse Source
This commit is contained in:
sonnguyenkieio
2021-09-13 15:46:08 +07:00
parent 42207a0756
commit e154724fef
12 changed files with 169 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss Normal file
View File

@@ -0,0 +1,63 @@
@import '../../../../styles/utilities';
.skeletonParagraph {
.row {
display: inline-block;
height: 2rem;
width: 100%;
position: relative;
overflow: hidden;
background-color: #DDDBDD;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
rgba(#fff, 0) 0,
rgba(#fff, 0.2) 20%,
rgba(#fff, 0.5) 60%,
rgba(#fff, 0)
);
animation: shimmer 2s infinite;
content: '';
}
}
.lastRow {
display: inline-block;
height: 2rem;
width: 80%;
position: relative;
overflow: hidden;
background-color: #DDDBDD;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
rgba(#fff, 0) 0,
rgba(#fff, 0.2) 20%,
rgba(#fff, 0.5) 60%,
rgba(#fff, 0)
);
animation: shimmer 2s infinite;
content: '';
}
}
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}