react-loadly/dist/styles.css

A professional React loaders package with high-performance, customizable loader components

.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-dots{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@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-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-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)}}@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-spinner-gradient{0%{border-color:#6366f1 transparent transparent;transform:rotate(0deg)}25%{border-color:#8b5cf6 transparent transparent}50%{border-color:#ec4899 transparent transparent}75%{border-color:#f59e0b transparent transparent}to{border-color:#6366f1 transparent transparent;transform:rotate(1turn)}}
/*# sourceMappingURL=styles.css.map */