react-loading-indicators
Version:
Kit of elegant loading indicators for react applications
2 lines (1 loc) • 5.73 kB
JavaScript
import{s as n,u as i,a,_ as r,T as o,b as t,d as e}from"./variables-n62kDm9E.js";import l from"react";n('.trophy-spin-rli-bounding-box {\n --trophySpin-phase1-color: rgb(50, 205, 50);\n box-sizing: border-box;\n font-size: 16px;\n position: relative;\n isolation: isolate;\n color: var(--trophySpin-phase1-color);\n}\n.trophy-spin-rli-bounding-box .trophy-spin-indicator {\n width: 4em;\n perspective: 1000px;\n transform-style: preserve-3d;\n display: block;\n margin: 0 auto;\n}\n.trophy-spin-rli-bounding-box .trophy-spin-indicator .blade {\n display: block;\n width: 4em;\n height: 0.5em;\n background: var(--trophySpin-phase1-color);\n animation: uxlv7y1 var(--rli-animation-duration, 2.5s) var(--rli-animation-function, linear) infinite, uxlv7z9 calc(var(--rli-animation-duration, 2.5s) * 0.5) var(--rli-animation-function, linear) infinite, uxlv7zo calc(var(--rli-animation-duration, 2.5s) * 4) var(--rli-animation-function, linear) infinite;\n}\n.trophy-spin-rli-bounding-box .trophy-spin-indicator .blade:nth-of-type(8) {\n animation-delay: calc(var(--rli-animation-duration, 2.5s) / 2 / 8 * 0 * -1);\n}\n.trophy-spin-rli-bounding-box .trophy-spin-indicator .blade:nth-of-type(7) {\n animation-delay: calc(var(--rli-animation-duration, 2.5s) / 2 / 8 * 1 * -1);\n}\n.trophy-spin-rli-bounding-box .trophy-spin-indicator .blade:nth-of-type(6) {\n animation-delay: calc(var(--rli-animation-duration, 2.5s) / 2 / 8 * 2 * -1);\n}\n.trophy-spin-rli-bounding-box .trophy-spin-indicator .blade:nth-of-type(5) {\n animation-delay: calc(var(--rli-animation-duration, 2.5s) / 2 / 8 * 3 * -1);\n}\n.trophy-spin-rli-bounding-box .trophy-spin-indicator .blade:nth-of-type(4) {\n animation-delay: calc(var(--rli-animation-duration, 2.5s) / 2 / 8 * 4 * -1);\n}\n.trophy-spin-rli-bounding-box .trophy-spin-indicator .blade:nth-of-type(3) {\n animation-delay: calc(var(--rli-animation-duration, 2.5s) / 2 / 8 * 5 * -1);\n}\n.trophy-spin-rli-bounding-box .trophy-spin-indicator .blade:nth-of-type(2) {\n animation-delay: calc(var(--rli-animation-duration, 2.5s) / 2 / 8 * 6 * -1);\n}\n.trophy-spin-rli-bounding-box .trophy-spin-indicator .blade:nth-of-type(1) {\n animation-delay: calc(var(--rli-animation-duration, 2.5s) / 2 / 8 * 7 * -1);\n}\n\n@property --trophySpin-phase1-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --trophySpin-phase2-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --trophySpin-phase3-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --trophySpin-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: 2.5s;\n}\n@keyframes uxlv7y1 {\n to {\n transform: rotateY(1turn) rotateX(-25deg);\n }\n}\n@keyframes uxlv7z9 {\n 100%, 0% {\n filter: brightness(1);\n opacity: 1;\n }\n 15% {\n filter: brightness(1);\n }\n 25% {\n opacity: 0.96;\n }\n 30% {\n filter: brightness(0.92);\n }\n 50% {\n filter: brightness(0.7);\n opacity: 1;\n }\n 75% {\n filter: brightness(0.92);\n opacity: 0.96;\n }\n 90% {\n filter: brightness(1);\n }\n}\n@keyframes uxlv7zo {\n 100%, 0% {\n background-color: var(--trophySpin-phase1-color);\n }\n 18% {\n background-color: var(--trophySpin-phase1-color);\n }\n 25% {\n background-color: var(--trophySpin-phase2-color, var(--trophySpin-phase1-color));\n }\n 43% {\n background-color: var(--trophySpin-phase2-color, var(--trophySpin-phase1-color));\n }\n 50% {\n background-color: var(--trophySpin-phase3-color, var(--trophySpin-phase1-color));\n }\n 68% {\n background-color: var(--trophySpin-phase3-color, var(--trophySpin-phase1-color));\n }\n 75% {\n background-color: var(--trophySpin-phase4-color, var(--trophySpin-phase1-color));\n }\n 93% {\n background-color: var(--trophySpin-phase4-color, var(--trophySpin-phase1-color));\n }\n}');var p=Array.from({length:4},(function(n,i){return"--trophySpin-phase".concat(i+1,"-color")})),s=function(n){var s,c=i(null==n?void 0:n.style,null==n?void 0:n.size),d=c.styles,h=c.fontSize,y=null==n?void 0:n.easing,u=a(null==n?void 0:n.speedPlus,"2.5s").animationPeriod,b=function(n){var i={},a=p.length;if(n instanceof Array){for(var r=t(n,a),o=0;o<r.length&&!(o>=4);o++)i[p[o]]=r[o];return i}try{if("string"!=typeof n)throw new Error("Color String expected");for(var l=0;l<a;l++)i[p[l]]=n}catch(r){r instanceof Error?console.warn("[".concat(r.message,']: Received "').concat(typeof n,'" instead with value, ').concat(JSON.stringify(n))):console.warn("".concat(JSON.stringify(n)," received in <TrophySpin /> indicator cannot be processed. Using default instead!"));for(l=0;l<a;l++)i[p[l]]=e}return i}(null!==(s=null==n?void 0:n.color)&&void 0!==s?s:"");return l.createElement("span",{className:"rli-d-i-b trophy-spin-rli-bounding-box",style:r(r(r(r(r({},h&&{fontSize:h}),u&&{"--rli-animation-duration":u}),y&&{"--rli-animation-function":y}),b),d),role:"status","aria-live":"polite","aria-label":"Loading"},l.createElement("span",{className:"rli-d-i-b trophy-spin-indicator"},l.createElement("span",{className:"blade"}),l.createElement("span",{className:"blade"}),l.createElement("span",{className:"blade"}),l.createElement("span",{className:"blade"}),l.createElement("span",{className:"blade"}),l.createElement("span",{className:"blade"}),l.createElement("span",{className:"blade"}),l.createElement("span",{className:"blade"})),l.createElement(o,{staticText:!0,text:null==n?void 0:n.text,textColor:null==n?void 0:n.textColor}))};export{s as default};