react-loading-indicators/Mosaic.js

Kit of elegant loading indicators for react applications

import{s as a,u as i,a as n,_ as o,T as e,b as r,d as c}from"./variables-n62kDm9E.js";import s from"react";a('.mosaic-rli-bounding-box {\n  --mosaic-phase1-color: rgb(50, 205, 50);\n  box-sizing: border-box;\n  font-size: 16px;\n  color: var(--mosaic-phase1-color);\n}\n.mosaic-rli-bounding-box .mosaic-indicator {\n  width: 5em;\n  height: 5em;\n  color: currentColor;\n  display: grid;\n  gap: 0.125em;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-areas: "a b c" "d e f" "g h i";\n  position: relative;\n  z-index: 0;\n}\n.mosaic-rli-bounding-box .mosaic-indicator .mosaic-cube-text {\n  mix-blend-mode: difference;\n  position: absolute;\n  top: 105%;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: -2;\n}\n.mosaic-rli-bounding-box .mosaic-indicator .mosaic-cube {\n  background-color: var(--mosaic-phase1-color);\n  animation-name: uxlv812, uxlv81s;\n  animation-duration: var(--rli-animation-duration, 1.5s), calc(var(--rli-animation-duration, 1.5s) * 4);\n  animation-timing-function: var(--rli-animation-function, ease-in-out);\n  animation-iteration-count: infinite;\n}\n.mosaic-rli-bounding-box .mosaic-indicator .mosaic-cube1 {\n  animation-delay: calc(var(--mosaic-skip-interval, 0.1s) * 2);\n  grid-area: a;\n}\n.mosaic-rli-bounding-box .mosaic-indicator .mosaic-cube2 {\n  animation-delay: calc(var(--mosaic-skip-interval, 0.1s) * 3);\n  grid-area: b;\n}\n.mosaic-rli-bounding-box .mosaic-indicator .mosaic-cube3 {\n  grid-area: c;\n  animation-delay: calc(var(--mosaic-skip-interval, 0.1s) * 4);\n}\n.mosaic-rli-bounding-box .mosaic-indicator .mosaic-cube4 {\n  grid-area: d;\n  animation-delay: calc(var(--mosaic-skip-interval, 0.1s) * 1);\n}\n.mosaic-rli-bounding-box .mosaic-indicator .mosaic-cube5 {\n  grid-area: e;\n  animation-delay: calc(var(--mosaic-skip-interval, 0.1s) * 2);\n}\n.mosaic-rli-bounding-box .mosaic-indicator .mosaic-cube6 {\n  grid-area: f;\n  animation-delay: calc(var(--mosaic-skip-interval, 0.1s) * 3);\n}\n.mosaic-rli-bounding-box .mosaic-indicator .mosaic-cube7 {\n  grid-area: g;\n  animation-delay: 0s;\n}\n.mosaic-rli-bounding-box .mosaic-indicator .mosaic-cube8 {\n  grid-area: h;\n  animation-delay: calc(var(--mosaic-skip-interval, 0.1s) * 1);\n}\n.mosaic-rli-bounding-box .mosaic-indicator .mosaic-cube9 {\n  grid-area: i;\n  animation-delay: calc(var(--mosaic-skip-interval, 0.1s) * 2);\n}\n\n@property --mosaic-phase1-color {\n  syntax: "<color>";\n  inherits: true;\n  initial-value: rgb(50, 205, 50);\n}\n@property --mosaic-phase2-color {\n  syntax: "<color>";\n  inherits: true;\n  initial-value: rgb(50, 205, 50);\n}\n@property --mosaic-phase3-color {\n  syntax: "<color>";\n  inherits: true;\n  initial-value: rgb(50, 205, 50);\n}\n@property --mosaic-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 uxlv812 {\n  0%, 60%, 100% {\n    transform: scale3D(1, 1, 1);\n  }\n  30% {\n    transform: scale3D(0, 0, 1);\n  }\n}\n@keyframes uxlv81s {\n  100%, 0% {\n    background-color: var(--mosaic-phase1-color);\n  }\n  25% {\n    background-color: var(--mosaic-phase2-color, var(--mosaic-phase1-color));\n  }\n  50% {\n    background-color: var(--mosaic-phase3-color, var(--mosaic-phase1-color));\n  }\n  75% {\n    background-color: var(--mosaic-phase4-color, var(--mosaic-phase1-color));\n  }\n}');var t=Array.from({length:4},(function(a,i){return"--mosaic-phase".concat(i+1,"-color")})),l=function(a){var l,m=i(null==a?void 0:a.style,null==a?void 0:a.size),d=m.styles,u=m.fontSize,b=null==a?void 0:a.easing,p=n(null==a?void 0:a.speedPlus,"1.5s").animationPeriod,v=Math.round(parseFloat(p)/9*100)/100;v+="s";var g=function(a){var i={};if(a instanceof Array){for(var n=r(a,t.length),o=0;o<n.length&&!(o>=4);o++)i[t[o]]=n[o];return i}try{if("string"!=typeof a)throw new Error("Color String expected");for(var e=0;e<t.length;e++)i[t[e]]=a}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 <Mosaic /> indicator cannot be processed. Using default instead!"));for(e=0;e<t.length;e++)i[t[e]]=c}return i}(null!==(l=null==a?void 0:a.color)&&void 0!==l?l:"");return s.createElement("span",{className:"rli-d-i-b  mosaic-rli-bounding-box",style:o(o(o(o(o({},u&&{fontSize:u}),p&&{"--rli-animation-duration":p}),b&&{"--rli-animation-function":b}),g),d),role:"status","aria-live":"polite","aria-label":"Loading"},s.createElement("span",{className:"rli-d-i-b mosaic-indicator",style:o({},v&&{"--mosaic-skip-interval":v})},s.createElement("span",{className:"rli-d-i-b mosaic-cube mosaic-cube1"}),s.createElement("span",{className:"rli-d-i-b mosaic-cube mosaic-cube2"}),s.createElement("span",{className:"rli-d-i-b mosaic-cube mosaic-cube3"}),s.createElement("span",{className:"rli-d-i-b mosaic-cube mosaic-cube4"}),s.createElement("span",{className:"rli-d-i-b mosaic-cube mosaic-cube5"}),s.createElement("span",{className:"rli-d-i-b mosaic-cube mosaic-cube6"}),s.createElement("span",{className:"rli-d-i-b mosaic-cube mosaic-cube7"}),s.createElement("span",{className:"rli-d-i-b mosaic-cube mosaic-cube8"}),s.createElement("span",{className:"rli-d-i-b mosaic-cube mosaic-cube9"})),s.createElement(e,{staticText:!0,text:null==a?void 0:a.text,textColor:null==a?void 0:a.textColor}))};export{l as default};