@aishwaryv/react-skeleton
Version:
Lightweight and minimalistic skeleton component for ReactJs
2 lines (1 loc) • 2.06 kB
JavaScript
import e from"react";var n=function(){return n=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},n.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;function t(r){return r.map((function(r,o){var a=r.name,i=r.nodes,s=r.className,c=r.duration,l=void 0===c?1.8:c,d=r.style,m=function(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)n.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(t[r[o]]=e[r[o]])}return t}(r,["name","nodes","className","duration","style"]);return e.createElement("div",n({key:a||o,className:"".concat(i?"":"skeleton"," ").concat(s),style:n({animationDuration:i?void 0:"".concat(l,"s")},d)},m),i&&t(i))}))}function r(e){return t(e.tree)}!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("/* Skeleton Loading */\n.skeleton {\n position: relative;\n overflow: hidden;\n border-radius: 0.25rem;\n background-color: var(--color-skeleton, #ececec);\n}\n\n.skeleton::after {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 200%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent 0%,\n rgba(255, 255, 255, 0.6) 50%,\n transparent 100%\n );\n animation: shimmer 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n animation-duration: inherit;\n z-index: 1;\n}\n\n/* Keyframes for shimmer animation */\n@keyframes shimmer {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n");export{r as Skeleton};