react-loading-indicators/Commet.js

Kit of elegant loading indicators for react applications

import{s as o,u as n,a as t,_ as e,T as r,b as i,d as a}from"./variables-n62kDm9E.js";import m from"react";o('.commet-rli-bounding-box {\n  --commet-phase1-color: rgb(50, 205, 50);\n  font-size: 16px;\n  width: 6.85em;\n  height: 6.85em;\n  overflow: hidden;\n  display: inline-block;\n  box-sizing: border-box;\n  position: relative;\n  isolation: isolate;\n}\n.commet-rli-bounding-box .commet-indicator {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  margin: auto;\n  box-sizing: border-box;\n  width: 6em;\n  height: 6em;\n  color: var(--commet-phase1-color);\n  display: inline-block;\n  isolation: isolate;\n  position: absolute;\n  z-index: 0;\n  animation: calc(var(--rli-animation-duration, 1.2s) * 4) var(--rli-animation-function, cubic-bezier(0.08, 0.03, 0.91, 0.93)) infinite uxlv7zu;\n}\n.commet-rli-bounding-box .commet-indicator .commet-box {\n  position: absolute;\n  display: inline-block;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  bottom: 0;\n  left: 0;\n  margin: auto;\n  animation: uxlv7zl var(--rli-animation-duration, 1.2s) var(--rli-animation-function, cubic-bezier(0.08, 0.03, 0.91, 0.93)) infinite;\n}\n.commet-rli-bounding-box .commet-indicator .commet-box:nth-of-type(1) {\n  width: 100%;\n  height: 100%;\n  animation-direction: normal;\n}\n.commet-rli-bounding-box .commet-indicator .commet-box:nth-of-type(2) {\n  width: 70%;\n  height: 70%;\n  animation-direction: reverse;\n}\n.commet-rli-bounding-box .commet-indicator .commet-box .commetball-box {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  bottom: 0;\n  left: 0;\n  display: inline-block;\n}\n.commet-rli-bounding-box .commet-indicator .commet-box .commetball-box::before {\n  content: "";\n  width: 0.5em;\n  height: 0.5em;\n  border-radius: 50%;\n  background-color: currentColor;\n  position: absolute;\n  top: -0.125em;\n  left: 50%;\n  transform: translateX(-50%);\n  box-shadow: 0 0 0.2em 0em currentColor, 0 0 0.6em 0em currentColor;\n}\n.commet-rli-bounding-box .commet-indicator .commet-box .commet-trail {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 50%;\n  box-sizing: border-box;\n  border-style: solid;\n}\n.commet-rli-bounding-box .commet-indicator .commet-box .commet-trail.trail1 {\n  border-color: currentColor transparent transparent currentColor;\n  border-width: 0.25em 0.25em 0 0;\n  transform: rotateZ(-45deg);\n}\n.commet-rli-bounding-box .commet-indicator .commet-box .commet-trail.trail2 {\n  border-color: currentColor currentColor transparent transparent;\n  border-width: 0.25em 0 0 0.25em;\n  transform: rotateZ(45deg);\n}\n.commet-rli-bounding-box .commet-text {\n  mix-blend-mode: difference;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: var(--commet-phase1-color);\n}\n\n@property --commet-phase1-color {\n  syntax: "<color>";\n  inherits: true;\n  initial-value: rgb(50, 205, 50);\n}\n@property --commet-phase2-color {\n  syntax: "<color>";\n  inherits: true;\n  initial-value: rgb(50, 205, 50);\n}\n@property --commet-phase3-color {\n  syntax: "<color>";\n  inherits: true;\n  initial-value: rgb(50, 205, 50);\n}\n@property --commet-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 uxlv7zl {\n  to {\n    transform: rotate(1turn);\n  }\n}\n@keyframes uxlv7zu {\n  100%, 0% {\n    color: var(--commet-phase1-color);\n  }\n  20% {\n    color: var(--commet-phase1-color);\n  }\n  25% {\n    color: var(--commet-phase2-color, var(--commet-phase1-color));\n  }\n  45% {\n    color: var(--commet-phase2-color, var(--commet-phase1-color));\n  }\n  50% {\n    color: var(--commet-phase3-color, var(--commet-phase1-color));\n  }\n  70% {\n    color: var(--commet-phase3-color, var(--commet-phase1-color));\n  }\n  75% {\n    color: var(--commet-phase4-color, var(--commet-phase1-color));\n  }\n  95% {\n    color: var(--commet-phase4-color, var(--commet-phase1-color));\n  }\n}');var l=Array.from({length:4},(function(o,n){return"--commet-phase".concat(n+1,"-color")})),c=function(o){var c,s=n(null==o?void 0:o.style,null==o?void 0:o.size),b=s.styles,d=s.fontSize,u=null==o?void 0:o.easing,p=t(null==o?void 0:o.speedPlus,"1.2s").animationPeriod,h=function(o){var n={};if(o instanceof Array){for(var t=i(o,l.length),e=0;e<t.length&&!(e>=4);e++)n[l[e]]=t[e];return n}try{if("string"!=typeof o)throw new Error("Color String expected");for(var r=0;r<l.length;r++)n[l[r]]=o}catch(t){t instanceof Error?console.warn("[".concat(t.message,']: Received "').concat(typeof o,'" instead with value, ').concat(JSON.stringify(o))):console.warn("".concat(JSON.stringify(o)," received in <Commet /> indicator cannot be processed. Using default instead!"));for(r=0;r<l.length;r++)n[l[r]]=a}return n}(null!==(c=null==o?void 0:o.color)&&void 0!==c?c:"");return m.createElement("span",{className:"rli-d-i-b commet-rli-bounding-box",style:e(e(e(e(e({},d&&{fontSize:d}),p&&{"--rli-animation-duration":p}),u&&{"--rli-animation-function":u}),h),b),role:"status","aria-live":"polite","aria-label":"Loading"},m.createElement("span",{className:"rli-d-i-b commet-indicator"},m.createElement("span",{className:"rli-d-i-b commet-box"},m.createElement("span",{className:"rli-d-i-b commet-trail trail1"}),m.createElement("span",{className:"rli-d-i-b  commetball-box"})),m.createElement("span",{className:"rli-d-i-b commet-box"},m.createElement("span",{className:"rli-d-i-b commet-trail trail2"}),m.createElement("span",{className:"rli-d-i-b commetball-box"})),m.createElement(r,{className:"commet-text",text:null==o?void 0:o.text,textColor:null==o?void 0:o.textColor})))};export{c as default};