✨ feat: Skeleton Common

2025-07-25 03:01:22 +00:00 · 2021-09-13 15:46:08 +07:00
parent 42207a0756
commit e154724fef
12 changed files with 169 additions and 251 deletions
--- a/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss
+++ b/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss
@@ -0,0 +1,53 @@
+@import '../../../../styles/utilities';
+
+.skeletonImage:empty {
+    @apply relative;
+    background: #DDDBDD;
+
+    &.small {
+        width: 10rem;
+        height: 10rem;
+    }
+
+    &.default {
+        width: 15rem;
+        height: 15rem;
+    }
+
+    &.large {
+        width: 20rem;
+        height: 20rem;
+    }
+
+    &.left {
+        margin-left: 0;
+    }
+
+    &.center {
+        margin: auto;
+    }
+
+    &::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%);
+    }
+}