react-loading-indicators/Riple.js

Kit of elegant loading indicators for react applications

import{s as r,u as n,a as i,_ as e,T as o,b as a,d as l}from"./variables-n62kDm9E.js";import t from"react";r('.riple-rli-bounding-box {\n  --riple-phase1-color: rgb(50, 205, 50);\n  box-sizing: border-box;\n  font-size: 16px;\n  display: inline-block;\n  color: var(--riple-phase1-color);\n}\n.riple-rli-bounding-box .riple-indicator {\n  display: inline-block;\n  width: 5em;\n  height: 5em;\n  position: relative;\n  z-index: 0;\n}\n.riple-rli-bounding-box .riple-indicator .riple-text {\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.riple-rli-bounding-box .riple-indicator .riple {\n  --border-width: 0.25em;\n  position: absolute;\n  border: var(--border-width) solid var(--riple-phase1-color);\n  opacity: 1;\n  border-radius: 50%;\n  will-change: top, right, left, bottom, border-color;\n  animation: var(--rli-animation-duration, 1s) var(--rli-animation-function, cubic-bezier(0, 0.2, 0.8, 1)) infinite uxlv7xx, calc(var(--rli-animation-duration, 1s) * 4) var(--rli-animation-function, cubic-bezier(0, 0.2, 0.8, 1)) infinite uxlv7yg;\n}\n.riple-rli-bounding-box .riple-indicator .riple:nth-of-type(2) {\n  animation-delay: calc(var(--rli-animation-duration, 1s) / 2 * -1);\n}\n\n@property --riple-phase1-color {\n  syntax: "<color>";\n  inherits: true;\n  initial-value: rgb(50, 205, 50);\n}\n@property --riple-phase2-color {\n  syntax: "<color>";\n  inherits: true;\n  initial-value: rgb(50, 205, 50);\n}\n@property --riple-phase3-color {\n  syntax: "<color>";\n  inherits: true;\n  initial-value: rgb(50, 205, 50);\n}\n@property --riple-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 uxlv7xx {\n  0% {\n    top: calc(50% - var(--border-width));\n    left: calc(50% - var(--border-width));\n    right: calc(50% - var(--border-width));\n    bottom: calc(50% - var(--border-width));\n    opacity: 0;\n  }\n  4.9% {\n    top: calc(50% - var(--border-width));\n    left: calc(50% - var(--border-width));\n    right: calc(50% - var(--border-width));\n    bottom: calc(50% - var(--border-width));\n    opacity: 0;\n  }\n  5% {\n    top: calc(50% - var(--border-width));\n    left: calc(50% - var(--border-width));\n    right: calc(50% - var(--border-width));\n    bottom: calc(50% - var(--border-width));\n    opacity: 1;\n  }\n  100% {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    opacity: 0;\n  }\n}\n@keyframes uxlv7yg {\n  100%, 0% {\n    border-color: var(--riple-phase1-color);\n  }\n  24.9% {\n    border-color: var(--riple-phase1-color);\n  }\n  25% {\n    border-color: var(--riple-phase2-color, var(--riple-phase1-color));\n  }\n  49.9% {\n    border-color: var(--riple-phase2-color, var(--riple-phase1-color));\n  }\n  50% {\n    border-color: var(--riple-phase3-color, var(--riple-phase1-color));\n  }\n  74.9% {\n    border-color: var(--riple-phase3-color, var(--riple-phase1-color));\n  }\n  75% {\n    border-color: var(--riple-phase4-color, var(--riple-phase1-color));\n  }\n  99.9% {\n    border-color: var(--riple-phase4-color, var(--riple-phase1-color));\n  }\n}');var c=Array.from({length:4},(function(r,n){return"--riple-phase".concat(n+1,"-color")})),p=function(r){var p,s=n(null==r?void 0:r.style,null==r?void 0:r.size),d=s.styles,b=s.fontSize,v=null==r?void 0:r.easing,h=i(null==r?void 0:r.speedPlus,"1s").animationPeriod,u=function(r){var n={};if(r instanceof Array){for(var i=a(r,c.length),e=0;e<i.length&&!(e>=4);e++)n[c[e]]=i[e];return n}try{if("string"!=typeof r)throw new Error("Color String expected");for(var o=0;o<c.length;o++)n[c[o]]=r}catch(i){i instanceof Error?console.warn("[".concat(i.message,']: Received "').concat(typeof r,'" instead with value, ').concat(JSON.stringify(r))):console.warn("".concat(JSON.stringify(r)," received in <Riple /> indicator cannot be processed. Using default instead!"));for(o=0;o<c.length;o++)n[c[o]]=l}return n}(null!==(p=null==r?void 0:r.color)&&void 0!==p?p:"");return t.createElement("span",{className:"rli-d-i-b riple-rli-bounding-box",style:e(e(e(e(e({},b&&{fontSize:b}),h&&{"--rli-animation-duration":h}),v&&{"--rli-animation-function":v}),u),d),role:"status","aria-live":"polite","aria-label":"Loading"},t.createElement("span",{className:"rli-d-i-b riple-indicator"},t.createElement("span",{className:"rli-d-i-b riple"}),t.createElement("span",{className:"rli-d-i-b riple"}),t.createElement(o,{className:"riple-text",text:null==r?void 0:r.text,textColor:null==r?void 0:r.textColor})))};export{p as default};