react-loadly/dist/styles.css

⚛️ React Loadly - Modern React loader, spinner, and skeleton loader components. High-performance loading indicators for React apps with TypeScript support, Next.js compatibility, accessibility, and 30+ customizable animations. Perfect for dashboards, form

.react-loadly{display:inline-block;position:relative}.react-loadly,.react-loadly *,.react-loadly :after,.react-loadly :before{box-sizing:border-box}:root{--react-loadly-color:#6366f1;--react-loadly-secondary-color:#8b5cf6;--react-loadly-size:40px;--react-loadly-speed:1;--react-loadly-background:transparent;--react-loadly-text-color:#6b7280;--react-loadly-border-width:2px;--react-loadly-glow-intensity:0.5;--react-loadly-error-color:#f87171;--react-loadly-error-color-hover:#ef4444;--react-loadly-error-background:#fef2f2;--react-loadly-error-border:#fecaca}.react-loadly-text{color:var(--react-loadly-text-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;margin-top:8px;text-align:center}.react-loadly-error{align-items:center;background-color:var(--react-loadly-error-background);border:1px solid var(--react-loadly-error-border);border-radius:8px;color:var(--react-loadly-error-color-hover);display:flex;flex-direction:column;padding:16px}.react-loadly-error-icon{color:var(--react-loadly-error-color);height:24px;margin-bottom:8px;width:24px}.react-loadly-retry-button{background-color:var(--react-loadly-error-color);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;margin-top:8px;padding:8px 16px;transition:background-color .2s}.react-loadly-retry-button:hover{background-color:var(--react-loadly-error-color-hover)}.react-loadly-retry-button:focus{outline:2px solid var(--react-loadly-error-color);outline-offset:2px}.react-loadly[aria-hidden=true]{pointer-events:none}.react-loadly-sr-only{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-loadly,.react-loadly *{backface-visibility:hidden;transform-style:preserve-3d;will-change:transform,opacity}@media (prefers-reduced-motion:reduce){.react-loadly,.react-loadly *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes react-loadly-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes react-loadly-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}@keyframes react-loadly-bounce{0%,20%,53%,80%,to{transform:translateY(0)}40%,43%{transform:translateY(-30px)}70%{transform:translateY(-15px)}90%{transform:translateY(-4px)}}@keyframes react-loadly-wave{0%,60%,to{transform:none}30%{transform:translateY(-15px)}}@keyframes react-loadly-glow{0%,to{box-shadow:0 0 5px var(--react-loadly-color)}50%{box-shadow:0 0 20px var(--react-loadly-color),0 0 30px var(--react-loadly-color)}}@keyframes react-loadly-fade{0%,to{opacity:1}50%{opacity:.3}}@keyframes react-loadly-scale{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes react-loadly-flip{0%{transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}to{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}@keyframes react-loadly-liquid{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(180deg)}}@keyframes react-loadly-flow{0%{opacity:0;transform:translateX(-100px) scale(0)}50%{opacity:1;transform:translateX(50%) scale(1)}to{opacity:0;transform:translateX(100%) scale(0)}}@keyframes react-loadly-neumorphic-pulse{0%,to{box-shadow:inset 5px 5px 10px hsla(0,0%,100%,.1),inset -5px -5px 10px rgba(0,0,0,.1);transform:scale(1)}50%{box-shadow:inset 8px 8px 15px hsla(0,0%,100%,.15),inset -8px -8px 15px rgba(0,0,0,.15);transform:scale(1.05)}}@keyframes react-loadly-neumorphic-rotate{0%{box-shadow:inset 5px 5px 10px hsla(0,0%,100%,.1),inset -5px -5px 10px rgba(0,0,0,.1);transform:rotate(0deg)}25%{box-shadow:inset -5px 5px 10px hsla(0,0%,100%,.1),inset 5px -5px 10px rgba(0,0,0,.1)}50%{box-shadow:inset -5px -5px 10px hsla(0,0%,100%,.1),inset 5px 5px 10px rgba(0,0,0,.1);transform:rotate(180deg)}75%{box-shadow:inset 5px -5px 10px hsla(0,0%,100%,.1),inset -5px 5px 10px rgba(0,0,0,.1)}to{box-shadow:inset 5px 5px 10px hsla(0,0%,100%,.1),inset -5px -5px 10px rgba(0,0,0,.1);transform:rotate(1turn)}}@keyframes react-loadly-bars{0%,to{transform:scaleY(1)}50%{transform:scaleY(.3)}}@keyframes react-loadly-blob{0%,to{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}25%{border-radius:58% 42% 75% 25%/76% 46% 54% 24%}50%{border-radius:50% 50% 33% 67%/55% 27% 73% 45%}75%{border-radius:33% 67% 58% 42%/63% 68% 32% 37%}}@keyframes react-loadly-liquid-wave{0%,to{transform:translate(-25%,50%) rotate(0deg)}50%{transform:translate(-25%,40%) rotate(180deg)}}@keyframes react-loadly-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes react-loadly-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes react-loadly-dots{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}@keyframes react-loadly-clock-hour{0%{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(1turn)}}@keyframes react-loadly-clock-minute{0%{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(1turn)}}@keyframes react-loadly-clock-second{0%{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(1turn)}}@keyframes react-loadly-blink{0%,to{opacity:1}50%{opacity:0}}@keyframes react-loadly-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes react-loadly-shimmer-overlay{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes react-loadly-shimmer-wave{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes react-loadly-shimmer-wave-overlay{0%{transform:translateX(-100%) scaleX(0)}50%{transform:translateX(0) scaleX(1)}to{transform:translateX(100%) scaleX(0)}}.react-loadly-auto-skeleton{display:block;transition:opacity .3s ease-in-out;width:100%}.react-loadly-progress-ring{will-change:transform}.react-loadly-progress-ring svg{animation:react-loadly-progress-ring-rotate 2s linear infinite;transform-origin:center;will-change:transform}.react-loadly-progress-ring svg circle{transform-origin:center}.react-loadly-progress-ring svg circle:last-child{animation:react-loadly-progress-ring-pulse 1.5s ease-in-out infinite}.react-loadly-neumorphic{will-change:transform,box-shadow}.react-loadly-neumorphic>div{animation:react-loadly-neumorphic-pulse var(--react-loadly-speed,1s) ease-in-out infinite;backface-visibility:hidden;transform-style:preserve-3d}.react-loadly-neumorphic.react-loadly-rotate>div{animation:react-loadly-neumorphic-rotate var(--react-loadly-speed,1s) linear infinite}@keyframes react-loadly-rotate-3d{0%{transform:rotateX(0deg) rotateY(0deg) rotate(0deg)}to{transform:rotateX(1turn) rotateY(1turn) rotate(1turn)}}@keyframes react-loadly-morph{0%,to{border-radius:50%;transform:rotate(0deg)}25%{border-radius:20% 80% 20% 80%;transform:rotate(90deg)}50%{border-radius:80% 20% 80% 20%;transform:rotate(180deg)}75%{border-radius:20% 80% 20% 80%;transform:rotate(270deg)}}@keyframes react-loadly-dots-enhanced{0%,20%,to{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}@keyframes react-loadly-progress-ring-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes react-loadly-squares-rotate{0%{transform:scale(1) rotate(0deg)}50%{transform:scale(.8) rotate(180deg)}to{transform:scale(1) rotate(1turn)}}@keyframes react-loadly-ripple{0%{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(2)}}@keyframes react-loadly-stair-cascade{0%,to{opacity:.4;transform:translateX(0)}50%{opacity:1;transform:translateX(-15px)}}@keyframes react-loadly-orbit{0%{transform:rotate(0deg) translateX(var(--orbit-radius,20px)) rotate(0deg)}to{transform:rotate(1turn) translateX(var(--orbit-radius,20px)) rotate(-1turn)}}@keyframes react-loadly-plane-rotate{0%{transform:rotateX(0deg) rotateY(0deg)}25%{transform:rotateX(90deg) rotateY(90deg)}50%{transform:rotateX(180deg) rotateY(180deg)}75%{transform:rotateX(270deg) rotateY(270deg)}to{transform:rotateX(1turn) rotateY(1turn)}}@keyframes react-loadly-orbit-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes react-loadly-hashtag{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}@keyframes react-loadly-flower-bloom{0%{opacity:.5;transform:scale(.2) rotate(0deg)}25%{opacity:.7;transform:scale(.5) rotate(90deg)}50%{opacity:.9;transform:scale(.8) rotate(180deg)}75%{opacity:1;transform:scale(1.1) rotate(270deg)}to{opacity:1;transform:scale(1) rotate(1turn)}}@keyframes react-loadly-flower-petal-bloom{0%{filter:blur(1px);opacity:.2;transform:scale(.2) rotate(0deg)}20%{filter:blur(.5px);opacity:.4;transform:scale(.4) rotate(18deg)}40%{filter:blur(0);opacity:.7;transform:scale(.7) rotate(36deg)}60%{filter:blur(0);opacity:.9;transform:scale(.9) rotate(54deg)}80%{filter:blur(0);opacity:1;transform:scale(1.1) rotate(72deg)}to{filter:blur(0);opacity:1;transform:scale(1) rotate(90deg)}}@keyframes react-loadly-flower-center-pulse{0%,to{box-shadow:0 0 15px var(--react-loadly-color);transform:scale(1)}50%{box-shadow:0 0 25px var(--react-loadly-color),0 0 40px var(--react-loadly-color);transform:scale(1.3)}}@keyframes react-loadly-flower-glow{0%,to{filter:drop-shadow(0 0 5px var(--react-loadly-color))}50%{filter:drop-shadow(0 0 15px var(--react-loadly-color)) drop-shadow(0 0 25px var(--react-loadly-secondary-color))}}@keyframes react-loadly-snake{0%,to{opacity:1;transform:scale(1)}25%{opacity:.7;transform:scale(.8)}50%{opacity:.5;transform:scale(.6)}75%{opacity:.7;transform:scale(.8)}}
/*# sourceMappingURL=styles.css.map */