react-loading-indicators
Version:
Kit of elegant loading indicators for react applications
2 lines (1 loc) • 5.27 kB
JavaScript
import{s as n,u as r,a as e,_ as o,T as a,b as i,d as t}from"./variables-n62kDm9E.js";import s from"react";n('.foursquare-rli-bounding-box {\n --four-square-phase1-color: rgb(50, 205, 50);\n font-size: 16px;\n box-sizing: border-box;\n color: var(--four-square-phase1-color);\n display: inline-block;\n overflow: hidden;\n}\n.foursquare-rli-bounding-box .foursquare-indicator {\n height: 5.3033008589em;\n width: 5.3033008589em;\n position: relative;\n display: block;\n}\n.foursquare-rli-bounding-box .foursquare-indicator .squares-container {\n position: absolute;\n z-index: 0;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n height: 2.5em;\n width: 2.5em;\n color: inherit;\n will-change: color, width, height;\n transform: rotate(45deg);\n animation: var(--rli-animation-duration, 1s) var(--rli-animation-function, cubic-bezier(0.05, 0.28, 0.79, 0.98)) infinite uxlv82m, calc(var(--rli-animation-duration, 1s) * 4) var(--rli-animation-function, cubic-bezier(0.05, 0.28, 0.79, 0.98)) infinite uxlv83b;\n}\n.foursquare-rli-bounding-box .foursquare-indicator .squares-container .square {\n position: absolute;\n width: 1.25em;\n height: 1.25em;\n border-radius: 0.1875em;\n background-color: currentColor;\n animation: uxlv825 var(--rli-animation-duration, 1s) var(--rli-animation-function, cubic-bezier(0.05, 0.28, 0.79, 0.98)) both infinite;\n}\n.foursquare-rli-bounding-box .foursquare-indicator .squares-container .square.square1 {\n top: 0;\n left: 0;\n}\n.foursquare-rli-bounding-box .foursquare-indicator .squares-container .square.square2 {\n top: 0;\n right: 0;\n}\n.foursquare-rli-bounding-box .foursquare-indicator .squares-container .square.square3 {\n bottom: 0;\n left: 0;\n}\n.foursquare-rli-bounding-box .foursquare-indicator .squares-container .square.square4 {\n bottom: 0;\n right: 0;\n}\n\n@property --four-square-phase1-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --four-square-phase2-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --four-square-phase3-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --four-square-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: 1s;\n}\n@keyframes uxlv82m {\n 0% {\n width: 2.5em;\n height: 2.5em;\n }\n 10% {\n width: 2.5em;\n height: 2.5em;\n }\n 50% {\n width: 3.75em;\n height: 3.75em;\n }\n 90% {\n width: 2.5em;\n height: 2.5em;\n }\n 100% {\n width: 2.5em;\n height: 2.5em;\n }\n}\n@keyframes uxlv825 {\n 0% {\n transform: rotateZ(0deg);\n }\n 10% {\n transform: rotateZ(0deg);\n }\n 50% {\n transform: rotateZ(90deg);\n }\n 90% {\n transform: rotateZ(90deg);\n }\n 100% {\n transform: rotateZ(90deg);\n }\n}\n@keyframes uxlv83b {\n 100%, 0% {\n color: var(--four-square-phase1-color);\n }\n 20% {\n color: var(--four-square-phase1-color);\n }\n 25% {\n color: var(--four-square-phase2-color, var(--four-square-phase1-color));\n }\n 45% {\n color: var(--four-square-phase2-color, var(--four-square-phase1-color));\n }\n 50% {\n color: var(--four-square-phase3-color, var(--four-square-phase1-color));\n }\n 70% {\n color: var(--four-square-phase3-color, var(--four-square-phase1-color));\n }\n 75% {\n color: var(--four-square-phase4-color, var(--four-square-phase1-color));\n }\n 95% {\n color: var(--four-square-phase4-color, var(--four-square-phase1-color));\n }\n}');var u=Array.from({length:4},(function(n,r){return"--four-square-phase".concat(r+1,"-color")})),l=function(n){var l,c=r(null==n?void 0:n.style,null==n?void 0:n.size),f=c.styles,d=c.fontSize,h=null==n?void 0:n.easing,m=e(null==n?void 0:n.speedPlus,"1s").animationPeriod,q=function(n){var r={};if(n instanceof Array){for(var e=i(n,u.length),o=0;o<e.length&&!(o>=4);o++)r[u[o]]=e[o];return r}try{if("string"!=typeof n)throw new Error("Color String expected");for(var a=0;a<u.length;a++)r[u[a]]=n}catch(e){e instanceof Error?console.warn("[".concat(e.message,']: Received "').concat(typeof n,'" instead with value, ').concat(JSON.stringify(n))):console.warn("".concat(JSON.stringify(n)," received in <FourSquare /> indicator cannot be processed. Using default instead!"));for(a=0;a<u.length;a++)r[u[a]]=t}return r}(null!==(l=null==n?void 0:n.color)&&void 0!==l?l:"");return s.createElement("span",{className:"rli-d-i-b foursquare-rli-bounding-box",style:o(o(o(o(o({},d&&{fontSize:d}),m&&{"--rli-animation-duration":m}),h&&{"--rli-animation-function":h}),q),f),role:"status","aria-live":"polite","aria-label":"Loading"},s.createElement("span",{className:"rli-d-i-b foursquare-indicator"},s.createElement("span",{className:"squares-container"},s.createElement("span",{className:"square square1"}),s.createElement("span",{className:"square square2"}),s.createElement("span",{className:"square square3"}),s.createElement("span",{className:"square square4"}))),s.createElement(a,{text:null==n?void 0:n.text,textColor:null==n?void 0:n.textColor,staticText:!0}))};export{l as default};