Skeleton loader for booking widget on desktop

2024-11-14 13:24:06 +01:00
parent 3e62df27cc
commit 1980ae4350
9 changed files with 233 additions and 11 deletions
--- a/components/SkeletonShimmer/skeleton.module.css
+++ b/components/SkeletonShimmer/skeleton.module.css
@@ -0,0 +1,29 @@
+.shimmer {
+  background-color: hsla(0, 0%, 85%, 0.5);
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  min-height: 1em;
+}
+.shimmer::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  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%
+  );
+  animation: shimmer 3s infinite;
+  content: "";
+}
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}