react-loading-indicators
Version:
Kit of elegant loading indicators for react applications
2 lines (1 loc) • 19.8 kB
JavaScript
import{s as n,u as o,a as r,_ as a,T as e,b as i,d as t}from"./variables-n62kDm9E.js";import l from"react";n('.pulsate-rli-bounding-box {\n --TD-pulsate-phase1-color: rgb(50, 205, 50);\n font-size: 16px;\n display: inline-block;\n box-sizing: border-box;\n color: var(--TD-pulsate-phase1-color);\n}\n.pulsate-rli-bounding-box .pulsate-indicator {\n width: 4.4em;\n height: 1.1em;\n text-align: center;\n position: relative;\n z-index: 0;\n display: flex;\n justify-content: space-between;\n flex-wrap: nowrap;\n align-items: center;\n}\n.pulsate-rli-bounding-box .pulsate-indicator .pulsate-dot {\n width: 1.1em;\n height: 1.1em;\n border-radius: 50%;\n background-color: var(--TD-pulsate-phase1-color);\n transform: scale(0);\n animation: var(--rli-animation-duration, 1.2s) var(--rli-animation-function, ease-in-out) var(--delay) infinite uxlv88w, calc(var(--rli-animation-duration, 1.2s) * 4) var(--rli-animation-function, ease-in-out) var(--delay) infinite uxlv8a5;\n}\n.pulsate-rli-bounding-box .pulsate-indicator .pulsate-dot:nth-of-type(1) {\n --delay: calc(var(--rli-animation-duration, 1.2s) * 0.15 * -1);\n}\n.pulsate-rli-bounding-box .pulsate-indicator .pulsate-dot:nth-of-type(2) {\n --delay: calc(var(--rli-animation-duration, 1.2s) * 0);\n}\n.pulsate-rli-bounding-box .pulsate-indicator .pulsate-dot:nth-of-type(3) {\n --delay: calc(var(--rli-animation-duration, 1.2s) * 0.15);\n}\n.pulsate-rli-bounding-box .pulsate-text {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 80%;\n text-transform: uppercase;\n text-align: center;\n font-size: 0.6em;\n letter-spacing: 0.5px;\n font-family: sans-serif;\n mix-blend-mode: difference;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: -2;\n}\n\n@property --TD-pulsate-phase1-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --TD-pulsate-phase2-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --TD-pulsate-phase3-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --TD-pulsate-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 uxlv88w {\n 0%, 90%, 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n}\n@keyframes uxlv8a5 {\n 0%, 100% {\n background-color: var(--TD-pulsate-phase1-color);\n }\n 24.9% {\n background-color: var(--TD-pulsate-phase1-color);\n }\n 25% {\n background-color: var(--TD-pulsate-phase2-color, var(--TD-pulsate-phase1-color));\n }\n 49.9% {\n background-color: var(--TD-pulsate-phase2-color, var(--TD-pulsate-phase1-color));\n }\n 50% {\n background-color: var(--TD-pulsate-phase3-color, var(--TD-pulsate-phase1-color));\n }\n 74.9% {\n background-color: var(--TD-pulsate-phase3-color, var(--TD-pulsate-phase1-color));\n }\n 75% {\n background-color: var(--TD-pulsate-phase4-color, var(--TD-pulsate-phase1-color));\n }\n 99.9% {\n background-color: var(--TD-pulsate-phase4-color, var(--TD-pulsate-phase1-color));\n }\n}');var c=Array.from({length:4},(function(n,o){return"--TD-pulsate-phase".concat(o+1,"-color")})),s=function(n){var s,b=o(null==n?void 0:n.style,null==n?void 0:n.size),u=b.styles,d=b.fontSize,p=null==n?void 0:n.easing,v=r(null==n?void 0:n.speedPlus,"1.2s").animationPeriod,g=function(n){var o={};if(n instanceof Array){for(var r=i(n,c.length),a=0;a<r.length&&!(a>=4);a++)o[c[a]]=r[a];return o}try{if("string"!=typeof n)throw new Error("Color String expected");for(var e=0;e<c.length;e++)o[c[e]]=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 <ThreeDot variant="pulsate" /> indicator cannot be processed. Using default instead!'));for(e=0;e<c.length;e++)o[c[e]]=t}return o}(null!==(s=null==n?void 0:n.color)&&void 0!==s?s:"");return l.createElement("span",{className:"rli-d-i-b pulsate-rli-bounding-box",style:a(a(a(a(a({},d&&{fontSize:d}),v&&{"--rli-animation-duration":v}),p&&{"--rli-animation-function":p}),g),u),role:"status","aria-live":"polite","aria-label":"Loading"},l.createElement("span",{className:"rli-d-i-b pulsate-indicator"},l.createElement("span",{className:"rli-d-i-b pulsate-dot"}),l.createElement("span",{className:"rli-d-i-b pulsate-dot"}),l.createElement("span",{className:"rli-d-i-b pulsate-dot"})),l.createElement(e,{staticText:!0,text:null==n?void 0:n.text,textColor:null==n?void 0:n.textColor}))};n('.brick-stack-rli-bounding-box {\n --TD-brick-stack-phase1-color: rgb(50, 205, 50);\n box-sizing: border-box;\n font-size: 16px;\n display: inline-block;\n color: var(--TD-brick-stack-phase1-color);\n}\n.brick-stack-rli-bounding-box .brick-stack-indicator {\n width: 2.8em;\n height: 2.8em;\n position: relative;\n display: block;\n margin: 0 auto;\n}\n.brick-stack-rli-bounding-box .brick-stack {\n width: 100%;\n height: 100%;\n background: radial-gradient(circle closest-side, currentColor 0% 95%, rgba(0, 0, 0, 0) calc(95% + 1px)) 0 0/40% 40% no-repeat, radial-gradient(circle closest-side, currentColor 0% 95%, rgba(0, 0, 0, 0) calc(95% + 1px)) 0 100%/40% 40% no-repeat, radial-gradient(circle closest-side, currentColor 0% 95%, rgba(0, 0, 0, 0) calc(95% + 1px)) 100% 100%/40% 40% no-repeat;\n animation: var(--rli-animation-duration, 1s) var(--rli-animation-function, ease-out) infinite uxlv88u, calc(var(--rli-animation-duration, 1s) * 4) var(--rli-animation-function, ease-out) infinite uxlv88v;\n}\n\n@property --TD-brick-stack-phase1-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --TD-brick-stack-phase2-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --TD-brick-stack-phase3-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --TD-brick-stack-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 uxlv88u {\n 0% {\n background-position: 0 0, 0 100%, 100% 100%;\n }\n 25% {\n background-position: 100% 0, 0 100%, 100% 100%;\n }\n 50% {\n background-position: 100% 0, 0 0, 100% 100%;\n }\n 75% {\n background-position: 100% 0, 0 0, 0 100%;\n }\n 100% {\n background-position: 100% 100%, 0 0, 0 100%;\n }\n}\n@keyframes uxlv88v {\n 100%, 0% {\n color: var(--TD-brick-stack-phase1-color);\n }\n 20% {\n color: var(--TD-brick-stack-phase1-color);\n }\n 25% {\n color: var(--TD-brick-stack-phase2-color, var(--TD-brick-stack-phase1-color));\n }\n 45% {\n color: var(--TD-brick-stack-phase2-color, var(--TD-brick-stack-phase1-color));\n }\n 50% {\n color: var(--TD-brick-stack-phase3-color, var(--TD-brick-stack-phase1-color));\n }\n 70% {\n color: var(--TD-brick-stack-phase3-color, var(--TD-brick-stack-phase1-color));\n }\n 75% {\n color: var(--TD-brick-stack-phase4-color, var(--TD-brick-stack-phase1-color));\n }\n 95% {\n color: var(--TD-brick-stack-phase4-color, var(--TD-brick-stack-phase1-color));\n }\n}');var b=Array.from({length:4},(function(n,o){return"--TD-brick-stack-phase".concat(o+1,"-color")})),u=function(n){var c,s=o(null==n?void 0:n.style,null==n?void 0:n.size),u=s.styles,d=s.fontSize,p=null==n?void 0:n.easing,v=r(null==n?void 0:n.speedPlus,"1s").animationPeriod,g=function(n){var o={};if(n instanceof Array){for(var r=i(n,b.length),a=0;a<r.length&&!(a>=4);a++)o[b[a]]=r[a];return o}try{if("string"!=typeof n)throw new Error("Color String expected");for(var e=0;e<b.length;e++)o[b[e]]=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 <ThreeDot variant="brick-stack" /> indicator cannot be processed. Using default instead!'));for(e=0;e<b.length;e++)o[b[e]]=t}return o}(null!==(c=null==n?void 0:n.color)&&void 0!==c?c:"");return l.createElement("span",{className:"rli-d-i-b brick-stack-rli-bounding-box",style:a(a(a(a(a({},d&&{fontSize:d}),v&&{"--rli-animation-duration":v}),p&&{"--rli-animation-function":p}),g),u),role:"status","aria-live":"polite","aria-label":"Loading"},l.createElement("span",{className:"rli-d-i-b brick-stack-indicator"},l.createElement("span",{className:"rli-d-i-b brick-stack"})),l.createElement(e,{staticText:!0,text:null==n?void 0:n.text,textColor:null==n?void 0:n.textColor}))};n('.bob-rli-bounding-box {\n --TD-bob-phase1-color: rgb(50, 205, 50);\n box-sizing: border-box;\n font-size: 16px;\n display: inline-block;\n color: var(--TD-bob-phase1-color);\n}\n.bob-rli-bounding-box .bob-indicator {\n width: 4.4em;\n height: 2.2em;\n position: relative;\n display: block;\n margin: 0 auto;\n}\n.bob-rli-bounding-box .bob-indicator .bobbing,\n.bob-rli-bounding-box .bob-indicator .bobbing::before,\n.bob-rli-bounding-box .bob-indicator .bobbing::after {\n width: 1.1em;\n height: 100%;\n display: grid;\n animation: var(--rli-animation-duration, 1.2s) var(--rli-animation-function, linear) var(--delay) infinite uxlv89v, calc(var(--rli-animation-duration, 1.2s) * 4) var(--rli-animation-function, linear) var(--delay) infinite uxlv8aw;\n}\n.bob-rli-bounding-box .bob-indicator .bobbing::before,\n.bob-rli-bounding-box .bob-indicator .bobbing::after {\n content: "";\n grid-area: 1/1;\n}\n.bob-rli-bounding-box .bob-indicator .bobbing {\n --delay: calc(var(--rli-animation-duration, 1.2s) * 0.12 * -1);\n background: radial-gradient(circle closest-side at center, currentColor 0% 92%, rgba(0, 0, 0, 0) calc(92% + 1px)) 50% 50%/100% 50% no-repeat;\n}\n.bob-rli-bounding-box .bob-indicator .bobbing::before {\n --delay: calc(var(--rli-animation-duration, 1.2s) * 0);\n transform: translateX(150%);\n background: radial-gradient(circle closest-side at center, currentColor 0% 92%, rgba(0, 0, 0, 0) calc(92% + 1px)) 50% 50%/100% 50% no-repeat;\n}\n.bob-rli-bounding-box .bob-indicator .bobbing::after {\n --delay: calc(var(--rli-animation-duration, 1.2s) * 0.12);\n transform: translateX(300%);\n background: radial-gradient(circle closest-side at center, currentColor 0% 92%, rgba(0, 0, 0, 0) calc(92% + 1px)) 50% 50%/100% 50% no-repeat;\n}\n\n@property --TD-bob-phase1-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --TD-bob-phase2-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --TD-bob-phase3-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --TD-bob-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 uxlv89v {\n 100%, 0% {\n background-position: 50% 50%;\n }\n 15% {\n background-position: 50% 10%;\n }\n 30% {\n background-position: 50% 100%;\n }\n 40% {\n background-position: 50% 0%;\n }\n 50% {\n background-position: 50% 90%;\n }\n 70% {\n background-position: 50% 10%;\n }\n 98% {\n background-position: 50% 50%;\n }\n}\n@keyframes uxlv8aw {\n 100%, 0% {\n color: var(--TD-bob-phase1-color);\n }\n 22% {\n color: var(--TD-bob-phase1-color);\n }\n 25% {\n color: var(--TD-bob-phase2-color, var(--TD-bob-phase1-color));\n }\n 47% {\n color: var(--TD-bob-phase2-color, var(--TD-bob-phase1-color));\n }\n 50% {\n color: var(--TD-bob-phase3-color, var(--TD-bob-phase1-color));\n }\n 72% {\n color: var(--TD-bob-phase3-color, var(--TD-bob-phase1-color));\n }\n 75% {\n color: var(--TD-bob-phase4-color, var(--TD-bob-phase1-color));\n }\n 97% {\n color: var(--TD-bob-phase4-color, var(--TD-bob-phase1-color));\n }\n}');var d=Array.from({length:4},(function(n,o){return"--TD-bob-phase".concat(o+1,"-color")})),p=function(n){var c,s=o(null==n?void 0:n.style,null==n?void 0:n.size),b=s.styles,u=s.fontSize,p=null==n?void 0:n.easing,v=r(null==n?void 0:n.speedPlus,"1.2s").animationPeriod,g=function(n){var o={};if(n instanceof Array){for(var r=i(n,d.length),a=0;a<r.length&&!(a>=4);a++)o[d[a]]=r[a];return o}try{if("string"!=typeof n)throw new Error("Color String expected");for(var e=0;e<d.length;e++)o[d[e]]=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 <ThreeDot variant="bob" /> indicator cannot be processed. Using default instead!'));for(e=0;e<d.length;e++)o[d[e]]=t}return o}(null!==(c=null==n?void 0:n.color)&&void 0!==c?c:"");return l.createElement("span",{className:"rli-d-i-b bob-rli-bounding-box",style:a(a(a(a(a({},u&&{fontSize:u}),v&&{"--rli-animation-duration":v}),p&&{"--rli-animation-function":p}),g),b),role:"status","aria-live":"polite","aria-label":"Loading"},l.createElement("span",{className:"bob-indicator"},l.createElement("span",{className:"bobbing"})),l.createElement(e,{staticText:!0,text:null==n?void 0:n.text,textColor:null==n?void 0:n.textColor}))};n('.bounce-rli-bounding-box {\n --TD-bounce-phase1-color: rgb(50, 205, 50);\n font-size: 16px;\n color: var(--TD-bounce-phase1-color);\n display: inline-block;\n padding-bottom: 0.25125em;\n}\n.bounce-rli-bounding-box .wrapper {\n --dot1-delay: 0s;\n --dot1-x-offset: 0.55em;\n --dot2-delay: calc((var(--rli-animation-duration, 0.5s) + var(--rli-animation-duration, 0.5s) * 0.75) * -1);\n --dot2-x-offset: 2.2em;\n --dot3-delay: calc((var(--rli-animation-duration, 0.5s) + var(--rli-animation-duration, 0.5s) * 0.5) * -1);\n --dot3-x-offset: 3.85em;\n width: 5.5em;\n height: 3.125em;\n position: relative;\n display: block;\n margin: 0 auto;\n}\n.bounce-rli-bounding-box .wrapper .group {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n.bounce-rli-bounding-box .wrapper .group .dot {\n width: 1.1em;\n height: 1.1em;\n position: absolute;\n border-radius: 50%;\n background-color: var(--TD-bounce-phase1-color);\n transform-origin: 50%;\n animation: var(--rli-animation-duration, 0.5s) var(--rli-animation-function, cubic-bezier(0.74, 0.1, 0.74, 1)) alternate infinite uxlv8bg, calc(var(--rli-animation-duration, 0.5s) * 4) var(--rli-animation-function, cubic-bezier(0.74, 0.1, 0.74, 1)) infinite uxlv8by;\n}\n.bounce-rli-bounding-box .wrapper .group .dot:nth-of-type(1) {\n left: var(--dot1-x-offset);\n animation-delay: var(--dot1-delay), 0s;\n}\n.bounce-rli-bounding-box .wrapper .group .dot:nth-of-type(2) {\n left: var(--dot2-x-offset);\n animation-delay: var(--dot2-delay), 0s;\n}\n.bounce-rli-bounding-box .wrapper .group .dot:nth-of-type(3) {\n left: var(--dot3-x-offset);\n animation-delay: var(--dot3-delay), 0s;\n}\n.bounce-rli-bounding-box .wrapper .group .shadow {\n width: 1.1em;\n height: 0.22em;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.5);\n position: absolute;\n top: 101%;\n transform-origin: 50%;\n z-index: -1;\n filter: blur(1px);\n animation: var(--rli-animation-duration, 0.5s) var(--rli-animation-function, cubic-bezier(0.74, 0.1, 0.74, 1)) alternate infinite uxlv8bq;\n}\n.bounce-rli-bounding-box .wrapper .group .shadow:nth-of-type(1) {\n left: var(--dot1-x-offset);\n animation-delay: var(--dot1-delay);\n}\n.bounce-rli-bounding-box .wrapper .group .shadow:nth-of-type(2) {\n left: var(--dot2-x-offset);\n animation-delay: var(--dot2-delay);\n}\n.bounce-rli-bounding-box .wrapper .group .shadow:nth-of-type(3) {\n left: var(--dot3-x-offset);\n animation-delay: var(--dot3-delay);\n}\n\n@property --TD-bounce-phase1-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --TD-bounce-phase2-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --TD-bounce-phase3-color {\n syntax: "<color>";\n inherits: true;\n initial-value: rgb(50, 205, 50);\n}\n@property --TD-bounce-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: 0.5s;\n}\n@keyframes uxlv8bg {\n 0% {\n top: 0%;\n }\n 60% {\n height: 1.25em;\n border-radius: 50%;\n transform: scaleX(1);\n }\n 100% {\n top: 100%;\n height: 0.22em;\n transform: scaleX(1.5);\n filter: blur(0.4px);\n }\n}\n@keyframes uxlv8bq {\n 0% {\n transform: scaleX(0.2);\n opacity: 0.2;\n }\n 60% {\n opacity: 0.4;\n }\n 100% {\n transform: scaleX(1.5);\n opacity: 0.6;\n }\n}\n@keyframes uxlv8by {\n 0%, 100% {\n background-color: var(--TD-bounce-phase1-color);\n }\n 20% {\n background-color: var(--TD-bounce-phase1-color);\n }\n 25% {\n background-color: var(--TD-bounce-phase2-color, var(--TD-bounce-phase1-color));\n }\n 45% {\n background-color: var(--TD-bounce-phase2-color, var(--TD-bounce-phase1-color));\n }\n 50% {\n background-color: var(--TD-bounce-phase3-color, var(--TD-bounce-phase1-color));\n }\n 70% {\n background-color: var(--TD-bounce-phase3-color, var(--TD-bounce-phase1-color));\n }\n 75% {\n background-color: var(--TD-bounce-phase4-color, var(--TD-bounce-phase1-color));\n }\n 95% {\n background-color: var(--TD-bounce-phase4-color, var(--TD-bounce-phase1-color));\n }\n}');var v=Array.from({length:4},(function(n,o){return"--TD-bounce-phase".concat(o+1,"-color")})),g=function(n){var c,s=o(null==n?void 0:n.style,null==n?void 0:n.size),b=s.styles,u=s.fontSize,d=null==n?void 0:n.easing,p=r(null==n?void 0:n.speedPlus,"0.5s").animationPeriod,g=function(n){var o={};if(n instanceof Array){for(var r=i(n,v.length),a=0;a<r.length&&!(a>=4);a++)o[v[a]]=r[a];return o}try{if("string"!=typeof n)throw new Error("Color String expected");for(var e=0;e<v.length;e++)o[v[e]]=n}catch(r){"production"!==process.env.NODE_ENV&&(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 <ThreeDot variant="bounce" /> indicator cannot be processed. Using default instead!')));for(e=0;e<v.length;e++)o[v[e]]=t}return o}(null!==(c=null==n?void 0:n.color)&&void 0!==c?c:"");return l.createElement("span",{className:"rli-d-i-b bounce-rli-bounding-box",style:a(a(a(a(a({},u&&{fontSize:u}),p&&{"--rli-animation-duration":p}),d&&{"--rli-animation-function":d}),g),b)},l.createElement("span",{className:"wrapper"},l.createElement("span",{className:"group"},l.createElement("span",{className:"rli-d-i-b dot"}),l.createElement("span",{className:"rli-d-i-b dot"}),l.createElement("span",{className:"rli-d-i-b dot"})),l.createElement("span",{className:"group"},l.createElement("span",{className:"rli-d-i-b shadow"}),l.createElement("span",{className:"rli-d-i-b shadow"}),l.createElement("span",{className:"rli-d-i-b shadow"}))),l.createElement(e,{staticText:!0,text:null==n?void 0:n.text,textColor:null==n?void 0:n.textColor,style:{marginTop:"2px"}}))};var h=function(n){var o=Object(n).variant,r=void 0===o?"pulsate":o;return"pulsate"===r?l.createElement(s,a({},n)):"brick-stack"===r?l.createElement(u,a({},n)):"bob"===r?l.createElement(p,a({},n)):"bounce"===r?l.createElement(g,a({},n)):null};export{h as default};