react-loading-indicators
Version:
Kit of elegant loading indicators for react applications
2 lines (1 loc) • 10.8 kB
JavaScript
import{s as a,d as r,u as n,a as o,_ as t,T as e,b as i}from"./variables-n62kDm9E.js";import b from"react";import{t as g}from"./tinycolor-0JHqLEVT.js";a('.atom-rli-bounding-box {\n --atom-phase1-rgb: 50, 205, 50;\n color: rgba(var(--atom-phase1-rgb), 1);\n font-size: 16px;\n position: relative;\n text-align: unset;\n isolation: isolate;\n}\n.atom-rli-bounding-box .atom-indicator {\n width: 6em;\n height: 6em;\n position: relative;\n perspective: 6em;\n overflow: hidden;\n color: rgba(var(--atom-phase1-rgb), 1);\n animation: calc(var(--rli-animation-duration, 1s) * 4) var(--rli-animation-function, linear) infinite uxlv87c;\n}\n.atom-rli-bounding-box .atom-indicator::after, .atom-rli-bounding-box .atom-indicator::before {\n content: "";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 0.48em;\n height: 0.48em;\n margin: auto;\n border-radius: 50%;\n background-image: radial-gradient(circle at 35% 15%, rgba(var(--atom-phase1-rgb), 0.1), rgba(var(--atom-phase1-rgb), 0.3) 37%, rgba(var(--atom-phase1-rgb), 1) 100%);\n animation: calc(var(--rli-animation-duration, 1s) * 4) var(--rli-animation-function, linear) infinite uxlv85f;\n}\n.atom-rli-bounding-box .atom-indicator::before {\n filter: drop-shadow(0px 0px 0.0625em currentColor);\n}\n.atom-rli-bounding-box .atom-indicator .electron-orbit {\n color: rgba(var(--atom-phase1-rgb), 0.85);\n border: 0;\n border-left: 0.4em solid currentColor;\n box-sizing: border-box;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n width: 4.8em;\n height: 4.8em;\n background-color: transparent;\n border-radius: 50%;\n transform-style: preserve-3d;\n animation: var(--rli-animation-duration, 1s) var(--rli-animation-function, linear) infinite uxlv86p, calc(var(--rli-animation-duration, 1s) * 4) var(--rli-animation-function, linear) infinite uxlv87w;\n}\n.atom-rli-bounding-box .atom-indicator .electron-orbit::after {\n content: "";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: 50%;\n color: rgba(var(--atom-phase1-rgb), 0.18);\n animation: calc(var(--rli-animation-duration, 1s) * 4) var(--rli-animation-function, linear) infinite uxlv881;\n border: 0.125em solid currentColor;\n}\n.atom-rli-bounding-box .atom-indicator .electron-orbit::before {\n content: "";\n width: 0.192em;\n height: 0.192em;\n position: absolute;\n border-radius: 50%;\n top: -0.096em;\n right: 0;\n bottom: 0;\n left: 0;\n margin: 0 auto;\n color: rgba(var(--atom-phase1-rgb), 1);\n box-shadow: 0px 0px 0.0625em 0.0625em currentColor, 0px 0px 0.0625em 0.125em currentColor;\n background-color: currentColor;\n transform: rotateY(-70deg);\n animation: var(--rli-animation-duration, 1s) var(--rli-animation-function, linear) infinite uxlv85p, calc(var(--rli-animation-duration, 1s) * 4) var(--rli-animation-function, linear) infinite uxlv87c;\n}\n.atom-rli-bounding-box .atom-indicator .electron-orbit:nth-of-type(1) {\n --orbit-vector-factor: -1;\n transform: rotateY(65deg) rotateX(calc(54deg * var(--orbit-vector-factor)));\n}\n.atom-rli-bounding-box .atom-indicator .electron-orbit:nth-of-type(2) {\n --orbit-vector-factor: 1;\n transform: rotateY(65deg) rotateX(calc(54deg * var(--orbit-vector-factor)));\n}\n.atom-rli-bounding-box .atom-indicator .electron-orbit:nth-of-type(3) {\n --orbit-vector-factor: 0;\n transform: rotateY(65deg) rotateX(calc(54deg * var(--orbit-vector-factor)));\n animation-delay: calc(var(--rli-animation-duration, 1s) * 0.5 * -1), calc(var(--rli-animation-duration, 1s) * 4 * -1);\n}\n.atom-rli-bounding-box .atom-indicator .electron-orbit:nth-of-type(3)::before {\n animation-delay: calc(var(--rli-animation-duration, 1s) * 0.5 * -1), calc(var(--rli-animation-duration, 1s) * 4 * -1);\n}\n.atom-rli-bounding-box .atom-text {\n color: currentColor;\n mix-blend-mode: difference;\n width: unset;\n display: block;\n}\n\n@property --atom-phase1-rgb {\n syntax: "<number>#";\n inherits: true;\n initial-value: 50, 205, 50;\n}\n@property --atom-phase2-rgb {\n syntax: "<number>#";\n inherits: true;\n initial-value: 50, 205, 50;\n}\n@property --atom-phase3-rgb {\n syntax: "<number>#";\n inherits: true;\n initial-value: 50, 205, 50;\n}\n@property --atom-phase4-rgb {\n syntax: "<number>#";\n inherits: true;\n initial-value: 50, 205, 50;\n}\n@property --rli-animation-duration {\n syntax: "<time>";\n inherits: true;\n initial-value: 1s;\n}\n@keyframes uxlv86p {\n from {\n transform: rotateY(70deg) rotateX(calc(54deg * var(--orbit-vector-factor))) rotateZ(0deg);\n }\n to {\n transform: rotateY(70deg) rotateX(calc(54deg * var(--orbit-vector-factor))) rotateZ(360deg);\n }\n}\n@keyframes uxlv85p {\n from {\n transform: rotateY(-70deg) rotateX(0deg);\n }\n to {\n transform: rotateY(-70deg) rotateX(-360deg);\n }\n}\n@keyframes uxlv85f {\n 100%, 0% {\n background-image: radial-gradient(circle at 35% 15%, rgba(var(--atom-phase1-rgb), 0.1), rgba(var(--atom-phase1-rgb), 0.3) 37%, rgba(var(--atom-phase1-rgb), 1) 100%);\n }\n 20% {\n background-image: radial-gradient(circle at 35% 15%, rgba(var(--atom-phase1-rgb), 0.1), rgba(var(--atom-phase1-rgb), 0.3) 37%, rgba(var(--atom-phase1-rgb), 1) 100%);\n }\n 25% {\n background-image: radial-gradient(circle at 35% 15%, rgba(var(--atom-phase2-rgb, var(--atom-phase1-rgb)), 0.1), rgba(var(--atom-phase2-rgb, var(--atom-phase1-rgb)), 0.3) 37%, rgba(var(--atom-phase2-rgb, var(--atom-phase1-rgb)), 1) 100%);\n }\n 45% {\n background-image: radial-gradient(circle at 35% 15%, rgba(var(--atom-phase2-rgb, var(--atom-phase1-rgb)), 0.1), rgba(var(--atom-phase2-rgb, var(--atom-phase1-rgb)), 0.3) 37%, rgba(var(--atom-phase2-rgb, var(--atom-phase1-rgb)), 1) 100%);\n }\n 50% {\n background-image: radial-gradient(circle at 35% 15%, rgba(var(--atom-phase3-rgb, var(--atom-phase1-rgb)), 0.1), rgba(var(--atom-phase3-rgb, var(--atom-phase1-rgb)), 0.3) 37%, rgba(var(--atom-phase3-rgb, var(--atom-phase1-rgb)), 1) 100%);\n }\n 70% {\n background-image: radial-gradient(circle at 35% 15%, rgba(var(--atom-phase3-rgb, var(--atom-phase1-rgb)), 0.1), rgba(var(--atom-phase3-rgb, var(--atom-phase1-rgb)), 0.3) 37%, rgba(var(--atom-phase3-rgb, var(--atom-phase1-rgb)), 1) 100%);\n }\n 75% {\n background-image: radial-gradient(circle at 35% 15%, rgba(var(--atom-phase4-rgb, var(--atom-phase1-rgb)), 0.1), rgba(var(--atom-phase4-rgb, var(--atom-phase1-rgb)), 0.3) 37%, rgba(var(--atom-phase4-rgb, var(--atom-phase1-rgb)), 1) 100%);\n }\n 95% {\n background-image: radial-gradient(circle at 35% 15%, rgba(var(--atom-phase4-rgb, var(--atom-phase1-rgb)), 0.1), rgba(var(--atom-phase4-rgb, var(--atom-phase1-rgb)), 0.3) 37%, rgba(var(--atom-phase4-rgb, var(--atom-phase1-rgb)), 1) 100%);\n }\n}\n@keyframes uxlv87c {\n 100%, 0% {\n color: rgba(var(--atom-phase1-rgb), 1);\n }\n 20% {\n color: rgba(var(--atom-phase1-rgb), 1);\n }\n 25% {\n color: rgba(var(--atom-phase2-rgb, var(--atom-phase1-rgb)), 1);\n }\n 45% {\n color: rgba(var(--atom-phase2-rgb, var(--atom-phase1-rgb)), 1);\n }\n 50% {\n color: rgba(var(--atom-phase3-rgb, var(--atom-phase1-rgb)), 1);\n }\n 70% {\n color: rgba(var(--atom-phase3-rgb, var(--atom-phase1-rgb)), 1);\n }\n 75% {\n color: rgba(var(--atom-phase4-rgb, var(--atom-phase1-rgb)), 1);\n }\n 95% {\n color: rgba(var(--atom-phase4-rgb, var(--atom-phase1-rgb)), 1);\n }\n}\n@keyframes uxlv87w {\n 100%, 0% {\n color: rgba(var(--atom-phase1-rgb), 0.85);\n }\n 20% {\n color: rgba(var(--atom-phase1-rgb), 0.85);\n }\n 25% {\n color: rgba(var(--atom-phase2-rgb, var(--atom-phase1-rgb)), 0.85);\n }\n 45% {\n color: rgba(var(--atom-phase2-rgb, var(--atom-phase1-rgb)), 0.85);\n }\n 50% {\n color: rgba(var(--atom-phase3-rgb, var(--atom-phase1-rgb)), 0.85);\n }\n 70% {\n color: rgba(var(--atom-phase3-rgb, var(--atom-phase1-rgb)), 0.85);\n }\n 75% {\n color: rgba(var(--atom-phase4-rgb, var(--atom-phase1-rgb)), 0.85);\n }\n 95% {\n color: rgba(var(--atom-phase4-rgb, var(--atom-phase1-rgb)), 0.85);\n }\n}\n@keyframes uxlv881 {\n 100%, 0% {\n color: rgba(var(--atom-phase1-rgb), 0.18);\n }\n 20% {\n color: rgba(var(--atom-phase1-rgb), 0.18);\n }\n 25% {\n color: rgba(var(--atom-phase2-rgb, var(--atom-phase1-rgb)), 0.18);\n }\n 45% {\n color: rgba(var(--atom-phase2-rgb, var(--atom-phase1-rgb)), 0.18);\n }\n 50% {\n color: rgba(var(--atom-phase3-rgb, var(--atom-phase1-rgb)), 0.18);\n }\n 70% {\n color: rgba(var(--atom-phase3-rgb, var(--atom-phase1-rgb)), 0.18);\n }\n 75% {\n color: rgba(var(--atom-phase4-rgb, var(--atom-phase1-rgb)), 0.18);\n }\n 95% {\n color: rgba(var(--atom-phase4-rgb, var(--atom-phase1-rgb)), 0.18);\n }\n}');var l=g(r).toRgb(),m=Array.from({length:4},(function(a,r){return"--atom-phase".concat(r+1,"-rgb")})),s=function(a){var r,s=n(null==a?void 0:a.style,null==a?void 0:a.size),c=s.styles,v=s.fontSize,p=null==a?void 0:a.easing,d=o(null==a?void 0:a.speedPlus,"1s").animationPeriod,h=function(a){var r={};if(a instanceof Array){for(var n=i(a,m.length),o=0;o<n.length&&!(o>=4);o++)try{if(!(s=g(n[o])).isValid())throw new Error("invalid color");var t=(c=s.toRgb()).r,e=c.g,b=c.b;r[m[o]]="".concat(t,", ").concat(e,", ").concat(b)}catch(a){t=l.r,e=l.g,b=l.b;r[m[o]]="".concat(t,", ").concat(e,", ").concat(b),console.warn("Possibly an invalid color( ".concat(n[o]," ) passed to Atom indicator!"))}return r}try{if("string"!=typeof a)throw new Error("Color String expected");var s;if(!(s=g(a)).isValid())throw new Error("Invalid color");var c;for(t=(c=s.toRgb()).r,e=c.g,b=c.b,o=0;o<m.length;o++)r[m[o]]="".concat(t,", ").concat(e,", ").concat(b)}catch(n){n instanceof Error?console.warn("[".concat(n.message,']: Received "').concat(typeof a,'" instead with value, ').concat(JSON.stringify(a))):console.warn("".concat(JSON.stringify(a)," received in <Atom /> indicator cannot be processed. Using default instead!"));for(o=0;o<m.length;o++){t=l.r,e=l.g,b=l.b;r[m[o]]="".concat(t,", ").concat(e,", ").concat(b)}}return r}(null!==(r=null==a?void 0:a.color)&&void 0!==r?r:"");return b.createElement("span",{className:"rli-d-i-b atom-rli-bounding-box",style:t(t(t(t(t({},v&&{fontSize:v}),d&&{"--rli-animation-duration":d}),p&&{"--rli-animation-function":p}),h),c),role:"status","aria-live":"polite","aria-label":"Loading"},b.createElement("span",{className:"rli-d-i-b atom-indicator"},b.createElement("span",{className:"rli-d-i-b electron-orbit"}),b.createElement("span",{className:"rli-d-i-b electron-orbit"}),b.createElement("span",{className:"rli-d-i-b electron-orbit"})),b.createElement(e,{className:"atom-text",staticText:!0,text:null==a?void 0:a.text,textColor:null==a?void 0:a.textColor}))};export{s as default};