frutjam/dist/components/skeleton.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.skeleton{--color-skeleton:var(--color-base-soft);--color-skeleton-shine:var(--color-base-active);--radius-skeleton:calc(var(--border-radius)*2);border-radius:var(--radius-skeleton);background-color:var(--color-skeleton);background-image:linear-gradient(90deg,transparent 0,var(--color-skeleton-shine) 50%,transparent 100%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;color:transparent;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.skeleton-circle{border-radius:9999px;aspect-ratio:1/1}.skeleton-text{background-image:linear-gradient(105deg,var(--color-on-base) 0 40%,var(--color-on-base) 50%,var(--color-on-base) 60% 100%);@supports (color:color-mix(in lab,red,red)){background-image:linear-gradient(105deg,color-mix(in oklch,var(--color-on-base) 20%,transparent) 0 40%,var(--color-on-base) 50%,color-mix(in oklch,var(--color-on-base) 20%,transparent) 60% 100%)}-webkit-background-clip:text;background-clip:text}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}