react-loading-indicators/LifeLine.js

Kit of elegant loading indicators for react applications

import{s as n,u as e,a as i,_ as l,T as o,b as r,d as a}from"./variables-n62kDm9E.js";import t from"react";n('.lifeline-rli-bounding-box {\n  --life-line-phase1-color: rgb(50, 205, 50);\n  font-size: 16px;\n  isolation: isolate;\n  color: var(--life-line-phase1-color);\n}\n.lifeline-rli-bounding-box .lifeline-indicator {\n  position: relative;\n  text-align: center;\n}\n.lifeline-rli-bounding-box .lifeline-indicator path.rli-lifeline {\n  stroke-dasharray: 474.7616760254 30.3039367676;\n  animation: var(--rli-animation-duration, 2s) var(--rli-animation-function, linear) infinite uxlv83o, calc(var(--rli-animation-duration, 2s) * 4) var(--rli-animation-function, linear) infinite uxlv83x;\n}\n.lifeline-rli-bounding-box .lifeline-text {\n  color: currentColor;\n  mix-blend-mode: difference;\n  width: unset;\n  display: block;\n}\n\n@property --life-line-phase1-color {\n  syntax: "<color>";\n  inherits: true;\n  initial-value: rgb(50, 205, 50);\n}\n@property --life-line-phase2-color {\n  syntax: "<color>";\n  inherits: true;\n  initial-value: rgb(50, 205, 50);\n}\n@property --life-line-phase3-color {\n  syntax: "<color>";\n  inherits: true;\n  initial-value: rgb(50, 205, 50);\n}\n@property --life-line-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: 2s;\n}\n@keyframes uxlv83o {\n  to {\n    stroke-dashoffset: -1010.1312255859;\n  }\n}\n@keyframes uxlv83x {\n  100%, 0% {\n    color: var(--life-line-phase1-color);\n  }\n  20% {\n    color: var(--life-line-phase1-color);\n  }\n  25% {\n    color: var(--life-line-phase2-color, var(--life-line-phase1-color));\n  }\n  45% {\n    color: var(--life-line-phase2-color, var(--life-line-phase1-color));\n  }\n  50% {\n    color: var(--life-line-phase3-color, var(--life-line-phase1-color));\n  }\n  70% {\n    color: var(--life-line-phase3-color, var(--life-line-phase1-color));\n  }\n  75% {\n    color: var(--life-line-phase4-color, var(--life-line-phase1-color));\n  }\n  95% {\n    color: var(--life-line-phase4-color, var(--life-line-phase1-color));\n  }\n}');var s=Array.from({length:4},(function(n,e){return"--life-line-phase".concat(e+1,"-color")})),c=function(n){var c,f=e(null==n?void 0:n.style,null==n?void 0:n.size),v=f.styles,p=f.fontSize,u=null==n?void 0:n.easing,d=i(null==n?void 0:n.speedPlus,"2s").animationPeriod,h=function(n){var e={};if(n instanceof Array){for(var i=r(n,s.length),l=0;l<i.length&&!(l>=4);l++)e[s[l]]=i[l];return e}try{if("string"!=typeof n)throw new Error("Color String expected");for(var o=0;o<s.length;o++)e[s[o]]=n}catch(i){i instanceof Error?console.warn("[".concat(i.message,']: Received "').concat(typeof n,'" instead with value, ').concat(JSON.stringify(n))):console.warn("".concat(JSON.stringify(n)," received in <LifeLine /> indicator cannot be processed. Using default instead!"));for(o=0;o<s.length;o++)e[s[o]]=a}return e}(null!==(c=null==n?void 0:n.color)&&void 0!==c?c:"");return t.createElement("span",{className:"rli-d-i-b lifeline-rli-bounding-box",style:l(l(l(l(l({},p&&{fontSize:p}),d&&{"--rli-animation-duration":d}),u&&{"--rli-animation-function":u}),h),v),role:"status","aria-live":"polite","aria-label":"Loading"},t.createElement("span",{className:"rli-d-i-b lifeline-indicator"},t.createElement("svg",{width:"14em",height:"6.825000001em",xmlns:"http://www.w3.org/2000/svg",version:"1.2",viewBox:"0 0 350 50",preserveAspectRatio:"xMinYMin meet"},t.createElement("path",{className:"rli-lifeline",stroke:"currentColor",fill:"none",strokeLinejoin:"round",strokeWidth:"4px",d:"M-113 70h250q8-30 12-3t5 8 3-7 3 4 6 35 8-55 6 40 8-3s2-11 10-10 1 1 8-10l4 8c6 4 8-6 10-17s2 10 9 11h210"}))),t.createElement(o,{staticText:!0,text:null==n?void 0:n.text,textColor:null==n?void 0:n.textColor}))};export{c as default};