scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Skeleton loader for footer

Browse Source
This commit is contained in:
Anton Gunnarsson
2024-11-14 13:25:33 +01:00
parent 1980ae4350
commit 16882fc20a
7 changed files with 151 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/SkeletonShimmer/skeleton.module.css
View File

@@ -1,9 +1,29 @@
.shimmer.dark {
--shimmer-background: rgba(255, 255, 255, 0.1);
--shimmer: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.1) 60%,
rgba(255, 255, 255, 0) 100%
);
}
.shimmer {
background-color: hsla(0, 0%, 85%, 0.5);
--shimmer-background: rgba(217, 217, 217, 0.5);
--shimmer: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.2) 20%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0) 100%
);
background-color: var(--shimmer-background);
position: relative;
overflow: hidden;
border-radius: 4px;
min-height: 1em;
min-width: 2ch;
}
.shimmer::after {
position: absolute;
@@ -12,13 +32,7 @@
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.2) 20%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0) 100%
);
background-image: var(--shimmer);
animation: shimmer 3s infinite;
content: "";
}