react-loadly
Version:
A professional React loaders package with high-performance, customizable loader components
1 lines • 9.93 kB
Source Map (JSON)
{"version":3,"sources":["base.css"],"names":[],"mappings":"AACA,cACE,oBAAqB,CACrB,iBAEF,CAEA,yEAHE,qBAOF,CAGA,MACE,4BAA6B,CAC7B,sCAAuC,CACvC,wBAAyB,CACzB,sBAAuB,CACvB,qCAAsC,CACtC,iCAAkC,CAClC,+BAAgC,CAChC,iCAAkC,CAElC,kCAAmC,CACnC,wCAAyC,CACzC,uCAAwC,CACxC,mCACF,CAGA,mBAKE,oCAAqC,CAHrC,uEAAgF,CAChF,cAAe,CACf,eAAgB,CAHhB,cAAe,CAKf,iBACF,CAGA,oBAGE,kBAAmB,CAInB,qDAAsD,CAFtD,iDAAkD,CAClD,iBAAkB,CAElB,2CAA4C,CAP5C,YAAa,CACb,qBAAsB,CAEtB,YAKF,CAEA,yBAIE,qCAAsC,CAFtC,WAAY,CACZ,iBAAkB,CAFlB,UAIF,CAEA,2BAGE,gDAAiD,CAEjD,WAAY,CACZ,iBAAkB,CAFlB,UAAY,CAIZ,cAAe,CADf,cAAe,CANf,cAAe,CACf,gBAAiB,CAOjB,+BACF,CAEA,iCACE,sDACF,CAEA,iCACE,iDAAkD,CAClD,kBACF,CAGA,gCACE,mBACF,CAEA,sBAQE,QAAS,CADT,oBAAqB,CAJrB,UAAW,CAEX,WAAY,CACZ,eAAgB,CAFhB,SAAU,CAHV,iBAAkB,CAQlB,kBAAmB,CAPnB,SAQF,CAGA,8BAGE,0BAA2B,CAC3B,2BAA4B,CAF5B,6BAGF,CAGA,uCACE,8BAEE,kCAAqC,CACrC,qCAAuC,CACvC,mCACF,CACF,CAGA,6BACE,GACE,sBACF,CACA,GACE,uBACF,CACF,CAEA,8BACE,MAEE,SAAU,CACV,kBACF,CACA,IACE,UAAY,CACZ,mBACF,CACF,CAEA,+BACE,kBAKE,uBACF,CACA,QAEE,2BACF,CACA,IACE,2BACF,CACA,IACE,0BACF,CACF,CAEA,6BACE,UAGE,cACF,CACA,IACE,2BACF,CACF,CAEA,6BACE,MAEE,4CACF,CACA,IACE,gFACF,CACF,CAEA,6BACE,MAEE,SACF,CACA,IACE,UACF,CACF,CAEA,8BACE,MAEE,kBACF,CACA,IACE,oBACF,CACF,CAEA,6BACE,UAGE,kBACF,CACA,IACE,kBACF,CACF,CAEA,6BACE,GACE,wDACF,CACA,IACE,6DACF,CACA,GACE,gEACF,CACF,CAEA,+BACE,MAEE,oCACF,CACA,IACE,0CACF,CACF,CAEA,6BACE,GAEE,SAAU,CADV,qCAEF,CACA,IAEE,SAAU,CADV,kCAEF,CACA,GAEE,SAAU,CADV,mCAEF,CACF,CACA,6BACE,MAEE,mBACF,CACA,IACE,oBACF,CACF,CAEA,6BACE,MAEE,6CACF,CACA,IACE,6CACF,CACA,IACE,6CACF,CACA,IACE,6CACF,CACF,CAEA,oCACE,MAEE,0CACF,CACA,IACE,4CACF,CACF,CAEA,6BACE,GACE,sBACF,CACA,GACE,uBACF,CACF,CAEA,8BACE,MAEE,SACF,CACA,IACE,SACF,CACF,CAGA,gCACE,GACE,2BACF,CACA,GACE,0BACF,CACF,CAEA,wCACE,GACE,2BACF,CACA,GACE,0BACF,CACF,CAEA,qCACE,GACE,2BACF,CACA,GACE,0BACF,CACF,CAEA,6CACE,GACE,qCACF,CACA,IACE,iCACF,CACA,GACE,oCACF,CACF,CAGA,kCACE,GACE,kDACF,CACA,GACE,qDACF,CACF,CAEA,8BACE,MAEE,iBAAkB,CAClB,sBACF,CACA,IACE,6BAA8B,CAC9B,uBACF,CACA,IACE,6BAA8B,CAC9B,wBACF,CACA,IACE,6BAA8B,CAC9B,wBACF,CACF,CAGA,sCACE,UAIE,UAAY,CADZ,mBAEF,CACA,IAEE,SAAU,CADV,oBAEF,CACF,CAGA,yCACE,GAEE,4CAAyD,CADzD,sBAEF,CACA,IACE,4CACF,CACA,IACE,4CACF,CACA,IACE,4CACF,CACA,GAEE,4CAAyD,CADzD,uBAEF,CACF","file":"styles.css","sourcesContent":["/* Base loader styles */\n.react-loadly {\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n}\n\n.react-loadly *,\n.react-loadly *::before,\n.react-loadly *::after {\n box-sizing: border-box;\n}\n\n/* CSS Variables for customization */\n:root {\n --react-loadly-color: #6366f1;\n --react-loadly-secondary-color: #8b5cf6;\n --react-loadly-size: 40px;\n --react-loadly-speed: 1;\n --react-loadly-background: transparent;\n --react-loadly-text-color: #6b7280;\n --react-loadly-border-width: 2px;\n --react-loadly-glow-intensity: 0.5;\n /* Error state colors */\n --react-loadly-error-color: #f87171;\n --react-loadly-error-color-hover: #ef4444;\n --react-loadly-error-background: #fef2f2;\n --react-loadly-error-border: #fecaca;\n}\n\n/* Loading text styles */\n.react-loadly-text {\n margin-top: 8px;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", sans-serif;\n font-size: 14px;\n font-weight: 500;\n color: var(--react-loadly-text-color);\n text-align: center;\n}\n\n/* Error and fallback styles */\n.react-loadly-error {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 16px;\n border: 1px solid var(--react-loadly-error-border);\n border-radius: 8px;\n background-color: var(--react-loadly-error-background);\n color: var(--react-loadly-error-color-hover);\n}\n\n.react-loadly-error-icon {\n width: 24px;\n height: 24px;\n margin-bottom: 8px;\n color: var(--react-loadly-error-color);\n}\n\n.react-loadly-retry-button {\n margin-top: 8px;\n padding: 8px 16px;\n background-color: var(--react-loadly-error-color);\n color: white;\n border: none;\n border-radius: 4px;\n font-size: 14px;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.react-loadly-retry-button:hover {\n background-color: var(--react-loadly-error-color-hover);\n}\n\n.react-loadly-retry-button:focus {\n outline: 2px solid var(--react-loadly-error-color);\n outline-offset: 2px;\n}\n\n/* Accessibility */\n.react-loadly[aria-hidden=\"true\"] {\n pointer-events: none;\n}\n\n.react-loadly-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n}\n\n/* Performance optimizations */\n.react-loadly,\n.react-loadly * {\n will-change: transform, opacity;\n backface-visibility: hidden;\n transform-style: preserve-3d;\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n .react-loadly,\n .react-loadly * {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n/* Common animations */\n@keyframes react-loadly-spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes react-loadly-pulse {\n 0%,\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n 50% {\n opacity: 0.5;\n transform: scale(0.8);\n }\n}\n\n@keyframes react-loadly-bounce {\n 0%,\n 20%,\n 53%,\n 80%,\n 100% {\n transform: translateY(0);\n }\n 40%,\n 43% {\n transform: translateY(-30px);\n }\n 70% {\n transform: translateY(-15px);\n }\n 90% {\n transform: translateY(-4px);\n }\n}\n\n@keyframes react-loadly-wave {\n 0%,\n 60%,\n 100% {\n transform: initial;\n }\n 30% {\n transform: translateY(-15px);\n }\n}\n\n@keyframes react-loadly-glow {\n 0%,\n 100% {\n box-shadow: 0 0 5px var(--react-loadly-color);\n }\n 50% {\n box-shadow: 0 0 20px var(--react-loadly-color), 0 0 30px var(--react-loadly-color);\n }\n}\n\n@keyframes react-loadly-fade {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.3;\n }\n}\n\n@keyframes react-loadly-scale {\n 0%,\n 100% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.2);\n }\n}\n\n@keyframes react-loadly-dots {\n 0%,\n 80%,\n 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n}\n\n@keyframes react-loadly-flip {\n 0% {\n transform: perspective(120px) rotateX(0deg) rotateY(0deg);\n }\n 50% {\n transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);\n }\n 100% {\n transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\n }\n}\n\n@keyframes react-loadly-liquid {\n 0%,\n 100% {\n transform: translateY(0px) rotate(0deg);\n }\n 50% {\n transform: translateY(-10px) rotate(180deg);\n }\n}\n\n@keyframes react-loadly-flow {\n 0% {\n transform: translateX(-100px) scale(0);\n opacity: 0;\n }\n 50% {\n transform: translateX(50%) scale(1);\n opacity: 1;\n }\n 100% {\n transform: translateX(100%) scale(0);\n opacity: 0;\n }\n}\n@keyframes react-loadly-bars {\n 0%,\n 100% {\n transform: scaleY(1);\n }\n 50% {\n transform: scaleY(0.3);\n }\n}\n\n@keyframes react-loadly-blob {\n 0%,\n 100% {\n border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;\n }\n 25% {\n border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;\n }\n 50% {\n border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;\n }\n 75% {\n border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;\n }\n}\n\n@keyframes react-loadly-liquid-wave {\n 0%,\n 100% {\n transform: translate(-25%, 50%) rotate(0deg);\n }\n 50% {\n transform: translate(-25%, 40%) rotate(180deg);\n }\n}\n\n@keyframes react-loadly-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes react-loadly-blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n}\n\n/* Shimmer and Skeleton animations */\n@keyframes react-loadly-shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n@keyframes react-loadly-shimmer-overlay {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n@keyframes react-loadly-shimmer-wave {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n@keyframes react-loadly-shimmer-wave-overlay {\n 0% {\n transform: translateX(-100%) scaleX(0);\n }\n 50% {\n transform: translateX(0%) scaleX(1);\n }\n 100% {\n transform: translateX(100%) scaleX(0);\n }\n}\n\n/* Enhanced geometric animations */\n@keyframes react-loadly-rotate-3d {\n 0% {\n transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);\n }\n 100% {\n transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);\n }\n}\n\n@keyframes react-loadly-morph {\n 0%,\n 100% {\n border-radius: 50%;\n transform: rotate(0deg);\n }\n 25% {\n border-radius: 20% 80% 20% 80%;\n transform: rotate(90deg);\n }\n 50% {\n border-radius: 80% 20% 80% 20%;\n transform: rotate(180deg);\n }\n 75% {\n border-radius: 20% 80% 20% 80%;\n transform: rotate(270deg);\n }\n}\n\n/* Loading dots with enhanced animation */\n@keyframes react-loadly-dots-enhanced {\n 0%,\n 20%,\n 100% {\n transform: scale(0.8);\n opacity: 0.5;\n }\n 50% {\n transform: scale(1.2);\n opacity: 1;\n }\n}\n\n/* Spinner with gradient */\n@keyframes react-loadly-spinner-gradient {\n 0% {\n transform: rotate(0deg);\n border-color: #6366f1 transparent transparent transparent;\n }\n 25% {\n border-color: #8b5cf6 transparent transparent transparent;\n }\n 50% {\n border-color: #ec4899 transparent transparent transparent;\n }\n 75% {\n border-color: #f59e0b transparent transparent transparent;\n }\n 100% {\n transform: rotate(360deg);\n border-color: #6366f1 transparent transparent transparent;\n }\n}\n"]}