@quidgest/ui 0.10.1 → 0.11.0

package/dist/index.d.ts

@@ -3470,6 +3470,38 @@ export declare const QSelect: {
     };
 });
 
+export declare const QSkeletonLoader: DefineComponent<{
+    type: {
+        type: PropType<"text" | "icon">;
+        default: undefined;
+    };
+    height: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    width: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+}, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<{
+    type: {
+        type: PropType<"text" | "icon">;
+        default: undefined;
+    };
+    height: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    width: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+}>>, {
+    type: "text" | "icon";
+    height: string | number;
+    width: string | number;
+}, {}>;
+
 export declare const QSpinnerLoader: DefineComponent<{
     size: {
         type: PropType<number>;

package/dist/ui.css

@@ -905,6 +905,51 @@ body *::-webkit-scrollbar-track {
   margin: 1rem 0;
 }
 
+.q-skeleton-loader__bone {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--q-theme-neutral-light);
+  animation: fadeIn 1s;
+  border-radius: 0.25rem;
+}
+.q-skeleton-loader__bone::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(90deg, rgb(var(--q-theme-background-rgb)/0) 0, rgb(var(--q-theme-background-rgb)/0.2) 20%, rgb(var(--q-theme-background-rgb)/0.5) 60%, rgb(var(--q-theme-background-rgb)/0));
+  animation: shimmer 2s infinite;
+  content: "";
+}
+.q-skeleton-loader--text {
+  height: 1em;
+}
+.q-skeleton-loader--icon {
+  width: 20px;
+  height: 20px;
+}
+.q-skeleton-loader--icon .q-skeleton-loader__bone {
+  border-radius: 50%;
+}
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .q-spinner-loader {
   font-size: 48px;
   width: 1em;