react-loading-indicators
Version:
Kit of elegant loading indicators for react applications
2 lines (1 loc) • 4.92 kB
JavaScript
import{s as n,u as a,a as r,_ as o,T as l,b as i,d as e}from"./variables-n62kDm9E.js";import t from"react";n('.slab-rli-bounding-box {\n --slab-phase1-color: rgb(50, 205, 50);\n font-size: 16px;\n color: var(--slab-phase1-color);\n position: relative;\n}\n.slab-rli-bounding-box .slab-indicator {\n position: relative;\n display: block;\n width: 7em;\n height: 4em;\n margin: 0 auto;\n overflow: hidden;\n}\n.slab-rli-bounding-box .slab-indicator .slabs-wrapper {\n width: 4em;\n height: 4em;\n transform: perspective(15em) rotateX(66deg) rotateZ(-25deg);\n transform-style: preserve-3d;\n transform-origin: 50% 100%;\n display: block;\n position: absolute;\n bottom: 0;\n right: 0;\n}\n.slab-rli-bounding-box .slab-indicator .slabs-wrapper .slab {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--slab-phase1-color);\n opacity: 0;\n box-shadow: -0.08em 0.15em 0 rgba(0, 0, 0, 0.45);\n transform-origin: 0% 0%;\n animation: calc(var(--rli-animation-duration-unitless, 3) * 1s) var(--rli-animation-function, linear) infinite uxlv841, calc(var(--rli-animation-duration-unitless, 3) * 4s) var(--rli-animation-function, linear) infinite uxlv851;\n}\n.slab-rli-bounding-box .slab-indicator .slabs-wrapper .slab:nth-child(1) {\n animation-delay: calc(4 / (16 / var(--rli-animation-duration-unitless, 3)) * 3 * -1 * 1s);\n}\n.slab-rli-bounding-box .slab-indicator .slabs-wrapper .slab:nth-child(2) {\n animation-delay: calc(4 / (16 / var(--rli-animation-duration-unitless, 3)) * 2 * -1 * 1s);\n}\n.slab-rli-bounding-box .slab-indicator .slabs-wrapper .slab:nth-child(3) {\n animation-delay: calc(4 / (16 / var(--rli-animation-duration-unitless, 3)) * -1 * 1s);\n}\n.slab-rli-bounding-box .slab-indicator .slabs-wrapper .slab:nth-child(4) {\n animation-delay: 0s;\n}\n\n@property --slab-phase1-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --slab-phase2-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --slab-phase3-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --slab-phase4-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --rli-animation-duration-unitless {\n syntax: "<number>";\n inherits: true;\n initial-value: 3;\n}\n@keyframes uxlv841 {\n 0% {\n transform: translateY(0) rotateX(30deg);\n opacity: 0;\n }\n 10% {\n transform: translateY(-40%) rotateX(0deg);\n opacity: 1;\n }\n 25% {\n opacity: 1;\n }\n 100% {\n transform: translateY(-400%) rotateX(0deg);\n opacity: 0;\n }\n}\n@keyframes uxlv851 {\n 100%, 0% {\n background-color: var(--slab-phase1-color);\n }\n 24.9% {\n background-color: var(--slab-phase1-color);\n }\n 25% {\n background-color: var(--slab-phase2-color, var(--slab-phase1-color));\n }\n 49.9% {\n background-color: var(--slab-phase2-color, var(--slab-phase1-color));\n }\n 50% {\n background-color: var(--slab-phase3-color, var(--slab-phase1-color));\n }\n 74.9% {\n background-color: var(--slab-phase3-color, var(--slab-phase1-color));\n }\n 75% {\n background-color: var(--slab-phase4-color, var(--slab-phase1-color));\n }\n 99.9% {\n background-color: var(--slab-phase4-color, var(--slab-phase1-color));\n }\n}');var s=Array.from({length:4},(function(n,a){return"--slab-phase".concat(a+1,"-color")})),c=function(n){var c,b=a(null==n?void 0:n.style,null==n?void 0:n.size),p=b.styles,d=b.fontSize,u=null==n?void 0:n.easing,m=r(null==n?void 0:n.speedPlus,"3s").animationPeriod,v=function(n){var a={};if(n instanceof Array){for(var r=i(n,s.length),o=0;o<r.length&&!(o>=4);o++)a[s[o]]=r[o];return a}try{if("string"!=typeof n)throw new Error("Color String expected");for(var l=0;l<s.length;l++)a[s[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 <Slab /> indicator cannot be processed. Using default instead!"));for(l=0;l<s.length;l++)a[s[l]]=e}return a}(null!==(c=null==n?void 0:n.color)&&void 0!==c?c:"");return t.createElement("span",{className:"rli-d-i-b slab-rli-bounding-box",style:o(o(o(o(o({},d&&{fontSize:d}),m&&{"--rli-animation-duration-unitless":parseFloat(m)}),u&&{"--rli-animation-function":u}),v),p),role:"status","aria-live":"polite","aria-label":"Loading"},t.createElement("span",{className:"rli-d-i-b slab-indicator"},t.createElement("span",{className:"slabs-wrapper"},t.createElement("span",{className:"slab"}),t.createElement("span",{className:"slab"}),t.createElement("span",{className:"slab"}),t.createElement("span",{className:"slab"}))),t.createElement(l,{staticText:!0,text:null==n?void 0:n.text,textColor:null==n?void 0:n.textColor}))};export{c as default};