added custom skeleton loader

2023-09-14 06:08:12 +01:00
parent 438a3077a3
commit 05e9ece8e1
6 changed files with 157 additions and 13 deletions
@@ -0,0 +1,33 @@
+:root {
+    --loader-width: auto;
+    --loader-height: auto;
+    --text-container-width: 400px;
+    --text-container-height: auto;
+    --line-height: 1.5;
+}
+
+.image-skeleton-loader,
+.blog-text-skeleton-loader {
+    width: var(--loader-width);
+    height: var(--loader-height);
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+}
+
+.image-skeleton-loader{
+    border-radius: 10px;
+}
+
+.blog-text-skeleton-loader {
+    line-height: calc(var(--text-container-height) * var(--line-height));
+}
+
+@keyframes loading {
+    0% {
+        background-position: -200% 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}