react-loading-indicators
Version:
Kit of elegant loading indicators for react applications
2 lines (1 loc) • 30.5 kB
JavaScript
import{s as n,u as o,a as r,_ as a,T as t,b as e,d as i}from"./variables-n62kDm9E.js";import l from"react";import{t as s}from"./tinycolor-0JHqLEVT.js";n('.OP-annulus-rli-bounding-box {\n --OP-annulus-phase1-color: rgb(50, 205, 50);\n font-size: 16px;\n display: inline-block;\n}\n.OP-annulus-rli-bounding-box .OP-annulus-indicator {\n width: 5em;\n height: 5em;\n color: var(--OP-annulus-phase1-color);\n display: inline-block;\n position: relative;\n z-index: 0;\n}\n.OP-annulus-rli-bounding-box .OP-annulus-indicator .whirl {\n animation: uxlv8cm calc(var(--rli-animation-duration, 1.5s) * 1.33) linear infinite;\n height: 100%;\n transform-origin: center center;\n width: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n}\n.OP-annulus-rli-bounding-box .OP-annulus-indicator .path {\n stroke-dasharray: 1, 125;\n stroke-dashoffset: 0;\n animation: var(--rli-animation-duration, 1.5s) var(--rli-animation-function, ease-in-out) infinite uxlv8d6, calc(var(--rli-animation-duration, 1.5s) * 4) var(--rli-animation-function, ease-in-out) infinite uxlv8eq;\n stroke-linecap: round;\n}\n.OP-annulus-rli-bounding-box .OP-annulus-text {\n mix-blend-mode: difference;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: -2;\n}\n\n@property --OP-annulus-phase1-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-annulus-phase2-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-annulus-phase3-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-annulus-phase4-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --rli-animation-duration {\n syntax: "<time>";\n inherits: true;\n initial-value: 1.5s;\n}\n@keyframes uxlv8cm {\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes uxlv8d6 {\n 0% {\n stroke-dasharray: 1, 125;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 98, 125;\n stroke-dashoffset: -35px;\n }\n 100% {\n stroke-dasharray: 98, 125;\n stroke-dashoffset: -124px;\n }\n}\n@keyframes uxlv8eq {\n 100%, 0% {\n stroke: var(--OP-annulus-phase1-color);\n }\n 22% {\n stroke: var(--OP-annulus-phase1-color);\n }\n 25% {\n stroke: var(--OP-annulus-phase2-color, var(--OP-annulus-phase1-color));\n }\n 42% {\n stroke: var(--OP-annulus-phase2-color, var(--OP-annulus-phase1-color));\n }\n 50% {\n stroke: var(--OP-annulus-phase3-color, var(--OP-annulus-phase1-color));\n }\n 72% {\n stroke: var(--OP-annulus-phase3-color, var(--OP-annulus-phase1-color));\n }\n 75% {\n stroke: var(--OP-annulus-phase4-color, var(--OP-annulus-phase1-color));\n }\n 97% {\n stroke: var(--OP-annulus-phase4-color, var(--OP-annulus-phase1-color));\n }\n}');var d=Array.from({length:4},(function(n,o){return"--OP-annulus-phase".concat(o+1,"-color")})),c=function(n){var s,c=o(null==n?void 0:n.style,null==n?void 0:n.size),u=c.styles,p=c.fontSize,h=null==n?void 0:n.easing,v=r(null==n?void 0:n.speedPlus,"1.5s").animationPeriod,b=function(n){var o={},r=d.length;if(n instanceof Array){for(var a=e(n,r),t=0;t<a.length&&!(t>=4);t++)o[d[t]]=a[t];return o}try{if("string"!=typeof n)throw new Error("Color String expected");for(var l=0;l<r;l++)o[d[l]]=n}catch(a){a instanceof Error?console.warn("[".concat(a.message,']: Received "').concat(typeof n,'" instead with value, ').concat(JSON.stringify(n))):console.warn("".concat(JSON.stringify(n),' received in <OrbitProgress variant="disc" /> indicator cannot be processed. Using default instead!'));for(l=0;l<r;l++)o[d[l]]=i}return o}(null!==(s=null==n?void 0:n.color)&&void 0!==s?s:""),m=(null==n?void 0:n.dense)?4.3:2.9;return l.createElement("span",{className:"rli-d-i-b OP-annulus-rli-bounding-box",style:a(a(a(a(a({},p&&{fontSize:p}),v&&{"--rli-animation-duration":v}),h&&{"--rli-animation-function":h}),b),u),role:"status","aria-live":"polite","aria-label":"Loading"},l.createElement("span",{className:"rli-d-i-b OP-annulus-indicator"},l.createElement("svg",{className:"whirl",viewBox:"25 25 50 50"},l.createElement("circle",{className:"path",cx:"50",cy:"50",r:"20",fill:"none",strokeWidth:m,strokeMiterlimit:"10"})),l.createElement(t,{className:"OP-annulus-text",text:null==n?void 0:n.text,textColor:null==n?void 0:n.textColor})))};function u(n){return n&&n.Math===Math&&n}n('.OP-dotted-rli-bounding-box {\n --OP-dotted-phase1-color: rgb(50, 205, 50);\n font-size: 16px;\n box-sizing: border-box;\n display: inline-block;\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator {\n width: 5em;\n height: 5em;\n color: var(--OP-dotted-phase1-color);\n display: inline-block;\n position: relative;\n z-index: 0;\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .OP-dotted-text {\n mix-blend-mode: difference;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: -2;\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder .dot {\n display: block;\n margin: 0 auto;\n width: 15%;\n height: 15%;\n background-color: currentColor;\n border-radius: 50%;\n animation: var(--rli-animation-duration, 1.2s) var(--rli-animation-function, ease-in-out) infinite uxlv8hg, calc(var(--rli-animation-duration, 1.2s) * 4) var(--rli-animation-function, ease-in-out) infinite uxlv8hp;\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(1) {\n transform: rotate(0deg);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(1) .dot {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) / 12 * 12 * -1);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(2) {\n transform: rotate(30deg);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(2) .dot {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) / 12 * 11 * -1);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(3) {\n transform: rotate(60deg);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(3) .dot {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) / 12 * 10 * -1);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(4) {\n transform: rotate(90deg);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(4) .dot {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) / 12 * 9 * -1);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(5) {\n transform: rotate(120deg);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(5) .dot {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) / 12 * 8 * -1);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(6) {\n transform: rotate(150deg);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(6) .dot {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) / 12 * 7 * -1);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(7) {\n transform: rotate(180deg);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(7) .dot {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) / 12 * 6 * -1);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(8) {\n transform: rotate(210deg);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(8) .dot {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) / 12 * 5 * -1);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(9) {\n transform: rotate(240deg);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(9) .dot {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) / 12 * 4 * -1);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(10) {\n transform: rotate(270deg);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(10) .dot {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) / 12 * 3 * -1);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(11) {\n transform: rotate(300deg);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(11) .dot {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) / 12 * 2 * -1);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(12) {\n transform: rotate(330deg);\n}\n.OP-dotted-rli-bounding-box .OP-dotted-indicator .dot-shape-holder:nth-of-type(12) .dot {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) / 12 * 1 * -1);\n}\n\n@property --OP-dotted-phase1-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-dotted-phase2-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-dotted-phase3-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-dotted-phase4-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --rli-animation-duration {\n syntax: "<time>";\n inherits: true;\n initial-value: 1.2s;\n}\n@keyframes uxlv8hg {\n 0%, 39%, 100% {\n opacity: 0;\n }\n 40% {\n opacity: 1;\n }\n}\n@keyframes uxlv8hp {\n 100%, 0% {\n background-color: var(--OP-dotted-phase1-color);\n }\n 22% {\n background-color: var(--OP-dotted-phase1-color);\n }\n 25% {\n background-color: var(--OP-dotted-phase2-color, var(--OP-dotted-phase1-color));\n }\n 47% {\n background-color: var(--OP-dotted-phase2-color, var(--OP-dotted-phase1-color));\n }\n 50% {\n background-color: var(--OP-dotted-phase3-color, var(--OP-dotted-phase1-color));\n }\n 72% {\n background-color: var(--OP-dotted-phase3-color, var(--OP-dotted-phase1-color));\n }\n 75% {\n background-color: var(--OP-dotted-phase4-color, var(--OP-dotted-phase1-color));\n }\n 97% {\n background-color: var(--OP-dotted-phase4-color, var(--OP-dotted-phase1-color));\n }\n}');var p=u("object"==typeof window&&window)||u("object"==typeof self&&self)||u("object"==typeof global&&global)||function(){return this}()||Function("return this")();function h(){var n,o;return(null===(n=null==p?void 0:p.crypto)||void 0===n?void 0:n.randomUUID)?p.crypto.randomUUID():(null===(o=null==p?void 0:p.btoa)||void 0===o?void 0:o.name)?p.btoa(new Date(Math.ceil(1e13*Math.random())).getTime()+""):Date.now().toString(36)+Math.random().toString(36).substring(0)}var v=Array.from({length:4},(function(n,o){return"--OP-dotted-phase".concat(o+1,"-color")})),b=function(n){var s,d=o(null==n?void 0:n.style,null==n?void 0:n.size),c=d.styles,u=d.fontSize,p=null==n?void 0:n.easing,b=r(null==n?void 0:n.speedPlus,"1.2s").animationPeriod,m=function(n){var o={},r=v.length;if(n instanceof Array){for(var a=e(n,r),t=0;t<a.length&&!(t>=4);t++)o[v[t]]=a[t];return o}try{if("string"!=typeof n)throw new Error("Color String expected");for(var l=0;l<r;l++)o[v[l]]=n}catch(a){a instanceof Error?console.warn("[".concat(a.message,']: Received "').concat(typeof n,'" with value, ').concat(JSON.stringify(n))):console.warn("".concat(JSON.stringify(n),' received in <OrbitProgress variant="dotted" /> indicator cannot be processed. Using default instead!'));for(l=0;l<r;l++)o[v[l]]=i}return o}(null!==(s=null==n?void 0:n.color)&&void 0!==s?s:""),O=(null==n?void 0:n.dense)?16:12;return l.createElement("span",{className:"rli-d-i-b OP-dotted-rli-bounding-box",style:a(a(a(a(a({},u&&{fontSize:u}),b&&{"--rli-animation-duration":b}),p&&{"--rli-animation-function":p}),m),c),role:"status","aria-live":"polite","aria-label":"Loading"},l.createElement("span",{className:"rli-d-i-b OP-dotted-indicator"},Array.from({length:O}).map((function(n,o){var r=function(n,o,r){if(16===o){var a=360*n/o,t=o-n,e=Number.parseFloat(r)/o*t*-1;return{transform:"rotate(".concat(a,"deg)"),animationDelay:"".concat(e,"s")}}return{transform:"",animationDelay:""}}(o,O,b),a=r.animationDelay,t=r.transform;return l.createElement("span",{key:h(),className:"rli-d-i-b dot-shape-holder",style:t?{transform:t}:void 0},l.createElement("span",{className:"dot",style:a?{animationDelay:a}:void 0}))})),l.createElement(t,{className:"OP-dotted-text",text:null==n?void 0:n.text,textColor:null==n?void 0:n.textColor})))};n('.OP-spokes-rli-bounding-box {\n --OP-spokes-phase1-color: rgb(50, 205, 50);\n font-size: 16px;\n position: relative;\n color: var(--OP-spokes-phase1-color);\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator {\n width: 4.8em;\n height: 4.8em;\n display: block;\n position: relative;\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator .spoke {\n position: absolute;\n height: 1.2em;\n width: 0.4em;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto auto auto 50%;\n background-color: var(--OP-spokes-phase1-color);\n border-radius: 0.24em;\n opacity: 0;\n animation: var(--rli-animation-duration, 1.2s) var(--rli-animation-function, ease-in-out) backwards infinite uxlv8fc, calc(var(--rli-animation-duration, 1.2s) * 4) var(--rli-animation-function, ease-in-out) infinite uxlv8g9;\n transform-origin: left center;\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator .spoke:nth-of-type(1) {\n transform: rotate(calc(0 * 360deg / 12)) translate(-50%, -1.56em);\n animation-delay: calc(11 * var(--rli-animation-duration, 1.2s) / 12 * -1);\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator .spoke:nth-of-type(2) {\n transform: rotate(calc(1 * 360deg / 12)) translate(-50%, -1.56em);\n animation-delay: calc(10 * var(--rli-animation-duration, 1.2s) / 12 * -1);\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator .spoke:nth-of-type(3) {\n transform: rotate(calc(2 * 360deg / 12)) translate(-50%, -1.56em);\n animation-delay: calc(9 * var(--rli-animation-duration, 1.2s) / 12 * -1);\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator .spoke:nth-of-type(4) {\n transform: rotate(calc(3 * 360deg / 12)) translate(-50%, -1.56em);\n animation-delay: calc(8 * var(--rli-animation-duration, 1.2s) / 12 * -1);\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator .spoke:nth-of-type(5) {\n transform: rotate(calc(4 * 360deg / 12)) translate(-50%, -1.56em);\n animation-delay: calc(7 * var(--rli-animation-duration, 1.2s) / 12 * -1);\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator .spoke:nth-of-type(6) {\n transform: rotate(calc(5 * 360deg / 12)) translate(-50%, -1.56em);\n animation-delay: calc(6 * var(--rli-animation-duration, 1.2s) / 12 * -1);\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator .spoke:nth-of-type(7) {\n transform: rotate(calc(6 * 360deg / 12)) translate(-50%, -1.56em);\n animation-delay: calc(5 * var(--rli-animation-duration, 1.2s) / 12 * -1);\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator .spoke:nth-of-type(8) {\n transform: rotate(calc(7 * 360deg / 12)) translate(-50%, -1.56em);\n animation-delay: calc(4 * var(--rli-animation-duration, 1.2s) / 12 * -1);\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator .spoke:nth-of-type(9) {\n transform: rotate(calc(8 * 360deg / 12)) translate(-50%, -1.56em);\n animation-delay: calc(3 * var(--rli-animation-duration, 1.2s) / 12 * -1);\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator .spoke:nth-of-type(10) {\n transform: rotate(calc(9 * 360deg / 12)) translate(-50%, -1.56em);\n animation-delay: calc(2 * var(--rli-animation-duration, 1.2s) / 12 * -1);\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator .spoke:nth-of-type(11) {\n transform: rotate(calc(10 * 360deg / 12)) translate(-50%, -1.56em);\n animation-delay: calc(1 * var(--rli-animation-duration, 1.2s) / 12 * -1);\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator .spoke:nth-of-type(12) {\n transform: rotate(calc(11 * 360deg / 12)) translate(-50%, -1.56em);\n animation-delay: calc(0 * var(--rli-animation-duration, 1.2s) / 12 * -1);\n}\n.OP-spokes-rli-bounding-box .OP-spokes-indicator-text {\n mix-blend-mode: difference;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: var(--OP-spokes-phase1-color);\n z-index: -2;\n}\n\n@property --OP-spokes-phase1-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-spokes-phase2-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-spokes-phase3-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-spokes-phase4-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --rli-animation-duration {\n syntax: "<time>";\n inherits: true;\n initial-value: 1.2s;\n}\n@keyframes uxlv8fc {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@keyframes uxlv8g9 {\n 100%, 0% {\n background-color: var(--OP-spokes-phase1-color);\n }\n 22% {\n background-color: var(--OP-spokes-phase1-color);\n }\n 25% {\n background-color: var(--OP-spokes-phase2-color, var(--OP-spokes-phase1-color));\n }\n 42% {\n background-color: var(--OP-spokes-phase2-color, var(--OP-spokes-phase1-color));\n }\n 50% {\n background-color: var(--OP-spokes-phase3-color, var(--OP-spokes-phase1-color));\n }\n 72% {\n background-color: var(--OP-spokes-phase3-color, var(--OP-spokes-phase1-color));\n }\n 75% {\n background-color: var(--OP-spokes-phase4-color, var(--OP-spokes-phase1-color));\n }\n 97% {\n background-color: var(--OP-spokes-phase4-color, var(--OP-spokes-phase1-color));\n }\n}');var m=Array.from({length:4},(function(n,o){return"--OP-spokes-phase".concat(o+1,"-color")})),O=function(n){var s,d=o(null==n?void 0:n.style,null==n?void 0:n.size),c=d.styles,u=d.fontSize,p=null==n?void 0:n.easing,v=r(null==n?void 0:n.speedPlus,"1.2s").animationPeriod,b=function(n){var o={},r=m.length;if(n instanceof Array){for(var a=e(n,r),t=0;t<a.length&&!(t>=4);t++)o[m[t]]=a[t];return o}try{if("string"!=typeof n)throw new Error("Color String expected");for(var l=0;l<r;l++)o[m[l]]=n}catch(a){a instanceof Error?console.warn("[".concat(a.message,']: Received "').concat(typeof n,'" instead with value, ').concat(JSON.stringify(n))):console.warn("".concat(JSON.stringify(n),' received in <OrbitProgress variant="spokes" /> indicator cannot be processed. Using default instead!'));for(l=0;l<r;l++)o[m[l]]=i}return o}(null!==(s=null==n?void 0:n.color)&&void 0!==s?s:""),O=(null==n?void 0:n.dense)?16:12;return l.createElement("span",{className:"rli-d-i-b OP-spokes-rli-bounding-box",style:a(a(a(a(a({},u&&{fontSize:u}),v&&{"--rli-animation-duration":v}),p&&{"--rli-animation-function":p}),b),c),role:"status","aria-live":"polite","aria-label":"Loading"},l.createElement("span",{className:"rli-d-i-b OP-spokes-indicator"},Array.from({length:O},(function(n,o){return l.createElement("span",{key:h(),className:"rli-d-i-b spoke",style:P(o,O,v)})}))),l.createElement(t,{text:null==n?void 0:n.text,textColor:null==n?void 0:n.textColor}))};function P(n,o,r){if(16===o){var a=o-n,t=Number.parseFloat(r)/o;return{transform:"rotate(".concat(360*n/o,"deg) translate(-50%, ").concat("-1.56em",")"),animationDelay:"".concat((a-1)*t*-1,"s")}}}n('.OP-annulus-dual-sectors-rli-bounding-box {\n --OP-annulus-dual-sectors-phase1-color: rgb(50, 205, 50);\n font-size: 16px;\n box-sizing: border-box;\n display: inline-block;\n}\n.OP-annulus-dual-sectors-rli-bounding-box .OP-annulus-dual-sectors-indicator {\n width: 5em;\n height: 5em;\n display: inline-block;\n position: relative;\n z-index: 0;\n color: var(--OP-annulus-dual-sectors-phase1-color);\n}\n.OP-annulus-dual-sectors-rli-bounding-box .OP-annulus-dual-sectors-indicator .annulus-sectors {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border-width: 0.34em;\n border-style: solid;\n border-color: var(--OP-annulus-dual-sectors-phase1-color) transparent var(--OP-annulus-dual-sectors-phase1-color) transparent;\n background-color: transparent;\n animation: var(--rli-animation-duration, 1.2s) var(--rli-animation-function, linear) infinite uxlv8cx, calc(var(--rli-animation-duration, 1.2s) * 4) var(--rli-animation-function, linear) infinite uxlv8ds;\n}\n.OP-annulus-dual-sectors-rli-bounding-box .OP-annulus-dual-sectors-indicator .OP-annulus-dual-sectors-text {\n mix-blend-mode: difference;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: -2;\n}\n\n@property --OP-annulus-dual-sectors-phase1-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-annulus-dual-sectors-phase2-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-annulus-dual-sectors-phase3-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-annulus-dual-sectors-phase4-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --rli-animation-duration {\n syntax: "<time>";\n inherits: true;\n initial-value: 1.2s;\n}\n@keyframes uxlv8cx {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes uxlv8ds {\n 100%, 0% {\n border-color: var(--OP-annulus-dual-sectors-phase1-color) transparent;\n }\n 20% {\n border-color: var(--OP-annulus-dual-sectors-phase1-color) transparent;\n }\n 25% {\n border-color: var(--OP-annulus-dual-sectors-phase2-color, var(--OP-annulus-dual-sectors-phase1-color)) transparent;\n }\n 45% {\n border-color: var(--OP-annulus-dual-sectors-phase2-color, var(--OP-annulus-dual-sectors-phase1-color)) transparent;\n }\n 50% {\n border-color: var(--OP-annulus-dual-sectors-phase3-color, var(--OP-annulus-dual-sectors-phase1-color)) transparent;\n }\n 70% {\n border-color: var(--OP-annulus-dual-sectors-phase3-color, var(--OP-annulus-dual-sectors-phase1-color)) transparent;\n }\n 75% {\n border-color: var(--OP-annulus-dual-sectors-phase4-color, var(--OP-annulus-dual-sectors-phase1-color)) transparent;\n }\n 95% {\n border-color: var(--OP-annulus-dual-sectors-phase4-color, var(--OP-annulus-dual-sectors-phase1-color)) transparent;\n }\n}');var f=Array.from({length:4},(function(n,o){return"--OP-annulus-dual-sectors-phase".concat(o+1,"-color")})),g=function(n){var s,d=o(null==n?void 0:n.style,null==n?void 0:n.size),c=d.styles,u=d.fontSize,p=null==n?void 0:n.easing,h=r(null==n?void 0:n.speedPlus,"1.2s").animationPeriod,v=function(n){var o={},r=f.length;if(n instanceof Array){for(var a=e(n,r),t=0;t<a.length&&!(t>=4);t++)o[f[t]]=a[t];return o}try{if("string"!=typeof n)throw new Error("Color String expected");for(var l=0;l<r;l++)o[f[l]]=n}catch(a){a instanceof Error?console.warn("[".concat(a.message,']: Received "').concat(typeof n,'" with value, ').concat(JSON.stringify(n))):console.warn("".concat(JSON.stringify(n),' received in <OrbitProgress variant="annulus-splits" /> indicator cannot be processed. Using default instead!'));for(l=0;l<r;l++)o[f[l]]=i}return o}(null!==(s=null==n?void 0:n.color)&&void 0!==s?s:""),b=n.dense?"0.45em":"";return l.createElement("span",{className:"rli-d-i-b OP-annulus-dual-sectors-rli-bounding-box",style:a(a(a(a(a({},u&&{fontSize:u}),h&&{"--rli-animation-duration":h}),p&&{"--rli-animation-function":p}),v),c),role:"status","aria-live":"polite","aria-label":"Loading"},l.createElement("span",{className:"rli-d-i-b OP-annulus-dual-sectors-indicator"},l.createElement("span",{className:"rli-d-i-b annulus-sectors",style:a({},b&&{borderWidth:b})}),l.createElement(t,{className:"OP-annulus-dual-sectors-text",text:null==n?void 0:n.text,textColor:null==n?void 0:n.textColor})))};n('.OP-annulus-sector-track-rli-bounding-box {\n --OP-annulus-track-phase1-color: rgba(50, 205, 50, 0.22);\n --OP-annulus-sector-phase1-color: rgb(50, 205, 50);\n font-size: 16px;\n display: inline-block;\n}\n.OP-annulus-sector-track-rli-bounding-box .OP-annulus-sector-track-indicator {\n width: 5em;\n height: 5em;\n color: var(--OP-annulus-sector-phase1-color);\n display: inline-block;\n position: relative;\n z-index: 0;\n}\n.OP-annulus-sector-track-rli-bounding-box .OP-annulus-sector-track-indicator .annulus-track-ring {\n width: 100%;\n height: 100%;\n border-width: 0.34em;\n border-style: solid;\n border-radius: 50%;\n box-sizing: border-box;\n border-color: var(--OP-annulus-track-phase1-color);\n border-top-color: var(--OP-annulus-sector-phase1-color);\n animation: var(--rli-animation-duration, 1s) var(--rli-animation-function, linear) infinite uxlv8h9, calc(var(--rli-animation-duration, 1s) * 4) var(--rli-animation-function, linear) infinite uxlv8hi;\n}\n.OP-annulus-sector-track-rli-bounding-box .OP-annulus-sector-track-indicator .OP-annulus-sector-text {\n mix-blend-mode: difference;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: -2;\n}\n\n@property --OP-annulus-track-phase1-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgba(50, 205, 50, 0.22);\n}\n@property --OP-annulus-track-phase2-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgba(50, 205, 50, 0.22);\n}\n@property --OP-annulus-track-phase3-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgba(50, 205, 50, 0.22);\n}\n@property --OP-annulus-track-phase4-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgba(50, 205, 50, 0.22);\n}\n@property --OP-annulus-sector-phase1-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-annulus-sector-phase2-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-annulus-sector-phase3-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --OP-annulus-sector-phase4-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --rli-animation-duration {\n syntax: "<time>";\n inherits: true;\n initial-value: 1s;\n}\n@keyframes uxlv8h9 {\n to {\n transform: rotate(1turn);\n }\n}\n@keyframes uxlv8hi {\n 100%, 0% {\n border-color: var(--OP-annulus-track-phase1-color);\n border-top-color: var(--OP-annulus-sector-phase1-color);\n }\n 18% {\n border-color: var(--OP-annulus-track-phase1-color);\n border-top-color: var(--OP-annulus-sector-phase1-color);\n }\n 25% {\n border-color: var(--OP-annulus-track-phase2-color, var(--OP-annulus-track-phase1-color));\n border-top-color: var(--OP-annulus-sector-phase2-color, var(--OP-annulus-sector-phase1-color));\n }\n 43% {\n border-color: var(--OP-annulus-track-phase2-color, var(--OP-annulus-track-phase1-color));\n border-top-color: var(--OP-annulus-sector-phase2-color, var(--OP-annulus-sector-phase1-color));\n }\n 50% {\n border-color: var(--OP-annulus-track-phase3-color, var(--OP-annulus-track-phase1-color));\n border-top-color: var(--OP-annulus-sector-phase3-color, var(--OP-annulus-sector-phase1-color));\n }\n 68% {\n border-color: var(--OP-annulus-track-phase3-color, var(--OP-annulus-track-phase1-color));\n border-top-color: var(--OP-annulus-sector-phase3-color, var(--OP-annulus-sector-phase1-color));\n }\n 75% {\n border-color: var(--OP-annulus-track-phase4-color, var(--OP-annulus-track-phase1-color));\n border-top-color: var(--OP-annulus-sector-phase4-color, var(--OP-annulus-sector-phase1-color));\n }\n 93% {\n border-color: var(--OP-annulus-track-phase4-color, var(--OP-annulus-track-phase1-color));\n border-top-color: var(--OP-annulus-sector-phase4-color, var(--OP-annulus-sector-phase1-color));\n }\n}');var y=Array.from({length:4},(function(n,o){return["--OP-annulus-track-phase".concat(o+1,"-color"),"--OP-annulus-sector-phase".concat(o+1,"-color")]})),x=function(n){return void 0===n&&(n=1),.25*n},k=function(n){var d,c=o(null==n?void 0:n.style,null==n?void 0:n.size),u=c.styles,p=c.fontSize,h=null==n?void 0:n.easing,v=r(null==n?void 0:n.speedPlus,"1s").animationPeriod,b=function(n){var o={},r=y.length;if(n instanceof Array){for(var a=e(n,r),t=0;t<a.length&&!(t>=4);t++){var l=y[t];try{if(!(u=s(a[t])).isValid())throw new Error("Invalid Color: ".concat(u.getOriginalInput()));var d=u.setAlpha(x(u.getAlpha())).toRgbString(),c=a[t];o[l[0]]=d,o[l[1]]=c}catch(n){c=i,d=(u=s(i)).setAlpha(x(u.getAlpha())).toRgbString();o[l[0]]=d,o[l[1]]=c}}return o}try{var u=s(n);if("string"!=typeof n)throw new Error("Color String expected");if(!u.isValid())throw new Error("Invalid Color: ".concat(u.getOriginalInput()));c=n,d=u.setAlpha(x(u.getAlpha())).toRgbString();for(var p=0;p<r;p++){o[(l=y[p])[0]]=d,o[l[1]]=c}}catch(r){r instanceof Error?console.warn("[".concat(r.message,']: Received "').concat(typeof n,'" with value, ').concat(JSON.stringify(n))):console.warn("".concat(JSON.stringify(n),' received in <OrbitProgress variant="annulus-track" /> indicator cannot be processed. Using default instead!'));for(c=i,d=(u=s(i)).setAlpha(x(u.getAlpha())).toRgbString(),p=0;p<y.length;p++){o[(l=y[p])[0]]=d,o[l[1]]=c}}return o}(null!==(d=null==n?void 0:n.color)&&void 0!==d?d:""),m=n.dense?"0.45em":"";return l.createElement("span",{className:"rli-d-i-b OP-annulus-sector-track-rli-bounding-box",style:a(a(a(a(a({},p&&{fontSize:p}),v&&{"--rli-animation-duration":v}),h&&{"--rli-animation-function":h}),b),u),role:"status","aria-live":"polite","aria-label":"Loading"},l.createElement("span",{className:"rli-d-i-b OP-annulus-sector-track-indicator"},l.createElement("span",{className:"rli-d-i-b annulus-track-ring",style:a({},m&&{borderWidth:m})}),l.createElement(t,{className:"OP-annulus-sector-text",text:null==n?void 0:n.text,textColor:null==n?void 0:n.textColor})))};var w=function(n){var o=Object(n).variant,r=void 0===o?"disc":o;return"dotted"===r?l.createElement(b,a({},n)):"spokes"===r?l.createElement(O,a({},n)):"disc"===r?l.createElement(c,a({},n)):"split-disc"===r?l.createElement(g,a({},n)):"track-disc"===r?l.createElement(k,a({},n)):null};export{w as default};