react-loading-indicators
Version:
Kit of elegant loading indicators for react applications
2 lines (1 loc) • 5.04 kB
JavaScript
import{s as n,u as a,a as r,_ as i,T as l,b as e,d as o}from"./variables-n62kDm9E.js";import t from"react";n('.blink-blur-rli-bounding-box {\n --shape-phase1-color: rgb(50, 205, 50);\n font-size: 16px;\n color: var(--shape-phase1-color);\n}\n.blink-blur-rli-bounding-box .blink-blur-indicator {\n isolation: isolate;\n display: flex;\n flex-direction: row;\n -moz-column-gap: 0.4em;\n column-gap: 0.4em;\n}\n.blink-blur-rli-bounding-box .blink-blur-indicator .blink-blur-shape {\n --x-deg: -20deg;\n width: 1.8em;\n height: 2.25em;\n border-radius: 0.25em;\n color: inherit;\n transform: skewX(var(--x-deg));\n background-color: var(--shape-phase1-color);\n animation-name: uxlv80e, uxlv81j;\n animation-duration: var(--rli-animation-duration, 1.2s), calc(var(--rli-animation-duration, 1.2s) * 4);\n animation-timing-function: var(--rli-animation-function, ease-in);\n animation-iteration-count: infinite;\n}\n.blink-blur-rli-bounding-box .blink-blur-indicator .blink-blur-shape.blink-blur-shape1 {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) * 0.5 * -1);\n}\n.blink-blur-rli-bounding-box .blink-blur-indicator .blink-blur-shape.blink-blur-shape2 {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) * 0.4 * -1);\n}\n.blink-blur-rli-bounding-box .blink-blur-indicator .blink-blur-shape.blink-blur-shape3 {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) * 0.3 * -1);\n}\n.blink-blur-rli-bounding-box .blink-blur-indicator .blink-blur-shape.blink-blur-shape4 {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) * 0.2 * -1);\n}\n.blink-blur-rli-bounding-box .blink-blur-indicator .blink-blur-shape.blink-blur-shape5 {\n animation-delay: calc(var(--rli-animation-duration, 1.2s) * 0.1 * -1);\n}\n\n@property --shape-phase1-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --shape-phase2-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --shape-phase3-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --shape-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 uxlv80e {\n 100%, 0% {\n opacity: 0.3;\n filter: blur(0.0675em) drop-shadow(0 0 0.0625em);\n transform: skewX(var(--x-deg)) scale(1.2, 1.45);\n }\n 39% {\n opacity: 0.8;\n }\n 40%, 41%, 42% {\n opacity: 0;\n }\n 43% {\n opacity: 0.8;\n }\n 50% {\n opacity: 1;\n filter: blur(0em) drop-shadow(0 0 0em);\n transform: skewX(var(--x-deg)) scale(1, 1);\n }\n}\n@keyframes uxlv81j {\n 100%, 0% {\n color: var(--shape-phase1-color);\n background-color: var(--shape-phase1-color);\n }\n 25% {\n color: var(--shape-phase2-color, var(--shape-phase1-color));\n background-color: var(--shape-phase2-color, var(--shape-phase1-color));\n }\n 50% {\n color: var(--shape-phase3-color, var(--shape-phase1-color));\n background-color: var(--shape-phase3-color, var(--shape-phase1-color));\n }\n 75% {\n color: var(--shape-phase4-color, var(--shape-phase1-color));\n background-color: var(--shape-phase4-color, var(--shape-phase1-color));\n }\n}');var s=Array.from({length:4},(function(n,a){return"--shape-phase".concat(a+1,"-color")})),c=function(n){var c,b=a(null==n?void 0:n.style,null==n?void 0:n.size),u=b.styles,p=b.fontSize,h=null==n?void 0:n.easing,d=r(null==n?void 0:n.speedPlus,"1.2s").animationPeriod,m=function(n){var a={},r=s.length;if(Array.isArray(n)&&n.length>0){for(var i=e(n,r),l=0;l<i.length&&!(l>r-1);l++){var t=i[l];a[s[l]]=t}return a}try{if("string"!=typeof n)throw new Error("Color String expected");for(l=0;l<r;l++)a[s[l]]=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 <BlinkBlur /> indicator cannot be processed. Using default instead!"));for(l=0;l<r;l++)a[s[l]]=o}return a}(null!==(c=null==n?void 0:n.color)&&void 0!==c?c:"");return t.createElement("span",{className:"rli-d-i-b blink-blur-rli-bounding-box",style:i(i(i(i(i({},p&&{fontSize:p}),d&&{"--rli-animation-duration":d}),h&&{"--rli-animation-function":h}),m),u),role:"status","aria-live":"polite","aria-label":"Loading"},t.createElement("span",{className:"rli-d-i-b blink-blur-indicator"},t.createElement("span",{className:"blink-blur-shape blink-blur-shape1"}),t.createElement("span",{className:"blink-blur-shape blink-blur-shape2"}),t.createElement("span",{className:"blink-blur-shape blink-blur-shape3"}),t.createElement("span",{className:"blink-blur-shape blink-blur-shape4"}),t.createElement("span",{className:"blink-blur-shape blink-blur-shape5"})),t.createElement(l,{staticText:!0,text:null==n?void 0:n.text,textColor:null==n?void 0:n.textColor,style:{marginTop:"0.8em"}}))};export{c as default};