UNPKG

@ionic/core

Version:
4 lines • 7.23 kB
/*! * (C) Ionic http://ionicframework.com - MIT License */ import{d as e,H as r,e as s,h as t,f as n,t as i}from"./p-Ct2aBEue.js";import{c as a}from"./p-byZM6qHV.js";import{b as o}from"./p-HthJZjZ6.js";const l={bubbles:{dur:1e3,circles:9,fn:(e,r,s)=>{const t=e*r/s-e+"ms",n=2*Math.PI*r/s;return{r:5,style:{top:32*Math.sin(n)+"%",left:32*Math.cos(n)+"%","animation-delay":t}}}},circles:{dur:1e3,circles:8,fn:(e,r,s)=>{const t=r/s,n=e*t-e+"ms",i=2*Math.PI*t;return{r:5,style:{top:32*Math.sin(i)+"%",left:32*Math.cos(i)+"%","animation-delay":n}}}},circular:{dur:1400,elmDuration:!0,circles:1,fn:()=>({r:20,cx:48,cy:48,fill:"none",viewBox:"24 24 48 48",transform:"translate(0,0)",style:{}})},crescent:{dur:750,circles:1,fn:()=>({r:26,style:{}})},dots:{dur:750,circles:3,fn:(e,r)=>({r:6,style:{left:32-32*r+"%","animation-delay":-110*r+"ms"}})},lines:{dur:1e3,lines:8,fn:(e,r,s)=>({y1:14,y2:26,style:{transform:`rotate(${360/s*r+(r<s/2?180:-180)}deg)`,"animation-delay":e*r/s-e+"ms"}})},"lines-small":{dur:1e3,lines:8,fn:(e,r,s)=>({y1:12,y2:20,style:{transform:`rotate(${360/s*r+(r<s/2?180:-180)}deg)`,"animation-delay":e*r/s-e+"ms"}})},"lines-sharp":{dur:1e3,lines:12,fn:(e,r,s)=>({y1:17,y2:29,style:{transform:`rotate(${30*r+(r<6?180:-180)}deg)`,"animation-delay":e*r/s-e+"ms"}})},"lines-sharp-small":{dur:1e3,lines:12,fn:(e,r,s)=>({y1:12,y2:20,style:{transform:`rotate(${30*r+(r<6?180:-180)}deg)`,"animation-delay":e*r/s-e+"ms"}})}},c=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.paused=!1}getName(){const e=this.name||s.get("spinner"),r=o(this);return e||("ios"===r?"lines":"circular")}render(){const e=this,r=o(e),i=e.getName(),c=l[i]??l.lines,m="number"==typeof e.duration&&e.duration>10?e.duration:c.dur,d=[];if(void 0!==c.circles)for(let e=0;e<c.circles;e++)d.push(f(c,m,e,c.circles));else if(void 0!==c.lines)for(let e=0;e<c.lines;e++)d.push(p(c,m,e,c.lines));return t(n,{key:"87102ff9ea58b0ecde5d0978386374f7d0e9cf98",class:a(e.color,{[r]:!0,[`spinner-${i}`]:!0,"spinner-paused":e.paused||s.getBoolean("_testing")}),role:"progressbar",style:c.elmDuration?{animationDuration:m+"ms"}:{}},d)}static get style(){return":host{display:inline-block;position:relative;width:28px;height:28px;color:var(--color);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.ion-color){color:var(--ion-color-base)}svg{-webkit-transform-origin:center;transform-origin:center;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}:host-context([dir=rtl]) svg{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}[dir=rtl] svg{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}@supports selector(:dir(rtl)){svg:dir(rtl){-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}}:host(.spinner-lines) line,:host(.spinner-lines-small) line{stroke-width:7px}:host(.spinner-lines-sharp) line,:host(.spinner-lines-sharp-small) line{stroke-width:4px}:host(.spinner-lines) line,:host(.spinner-lines-small) line,:host(.spinner-lines-sharp) line,:host(.spinner-lines-sharp-small) line{stroke-linecap:round;stroke:currentColor}:host(.spinner-lines) svg,:host(.spinner-lines-small) svg,:host(.spinner-lines-sharp) svg,:host(.spinner-lines-sharp-small) svg{-webkit-animation:spinner-fade-out 1s linear infinite;animation:spinner-fade-out 1s linear infinite}:host(.spinner-bubbles) svg{-webkit-animation:spinner-scale-out 1s linear infinite;animation:spinner-scale-out 1s linear infinite;fill:currentColor}:host(.spinner-circles) svg{-webkit-animation:spinner-fade-out 1s linear infinite;animation:spinner-fade-out 1s linear infinite;fill:currentColor}:host(.spinner-crescent) circle{fill:transparent;stroke-width:4px;stroke-dasharray:128px;stroke-dashoffset:82px;stroke:currentColor}:host(.spinner-crescent) svg{-webkit-animation:spinner-rotate 1s linear infinite;animation:spinner-rotate 1s linear infinite}:host(.spinner-dots) circle{stroke-width:0;fill:currentColor}:host(.spinner-dots) svg{-webkit-animation:spinner-dots 1s linear infinite;animation:spinner-dots 1s linear infinite}:host(.spinner-circular) svg{-webkit-animation:spinner-circular linear infinite;animation:spinner-circular linear infinite}:host(.spinner-circular) circle{-webkit-animation:spinner-circular-inner ease-in-out infinite;animation:spinner-circular-inner ease-in-out infinite;stroke:currentColor;stroke-dasharray:80px, 200px;stroke-dashoffset:0px;stroke-width:5.6;fill:none}:host(.spinner-paused),:host(.spinner-paused) svg,:host(.spinner-paused) circle{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes spinner-fade-out{0%{opacity:1}100%{opacity:0}}@keyframes spinner-fade-out{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes spinner-scale-out{0%{-webkit-transform:scale(1, 1);transform:scale(1, 1)}100%{-webkit-transform:scale(0, 0);transform:scale(0, 0)}}@keyframes spinner-scale-out{0%{-webkit-transform:scale(1, 1);transform:scale(1, 1)}100%{-webkit-transform:scale(0, 0);transform:scale(0, 0)}}@-webkit-keyframes spinner-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spinner-dots{0%{-webkit-transform:scale(1, 1);transform:scale(1, 1);opacity:0.9}50%{-webkit-transform:scale(0.4, 0.4);transform:scale(0.4, 0.4);opacity:0.3}100%{-webkit-transform:scale(1, 1);transform:scale(1, 1);opacity:0.9}}@keyframes spinner-dots{0%{-webkit-transform:scale(1, 1);transform:scale(1, 1);opacity:0.9}50%{-webkit-transform:scale(0.4, 0.4);transform:scale(0.4, 0.4);opacity:0.3}100%{-webkit-transform:scale(1, 1);transform:scale(1, 1);opacity:0.9}}@-webkit-keyframes spinner-circular{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner-circular{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spinner-circular-inner{0%{stroke-dasharray:1px, 200px;stroke-dashoffset:0px}50%{stroke-dasharray:100px, 200px;stroke-dashoffset:-15px}100%{stroke-dasharray:100px, 200px;stroke-dashoffset:-125px}}@keyframes spinner-circular-inner{0%{stroke-dasharray:1px, 200px;stroke-dashoffset:0px}50%{stroke-dasharray:100px, 200px;stroke-dashoffset:-15px}100%{stroke-dasharray:100px, 200px;stroke-dashoffset:-125px}}"}},[1,"ion-spinner",{color:[513],duration:[2],name:[1],paused:[4]}]),f=(e,r,s,n)=>{const i=e.fn(r,s,n);return i.style["animation-duration"]=r+"ms",t("svg",{viewBox:i.viewBox||"0 0 64 64",style:i.style},t("circle",{transform:i.transform||"translate(32,32)",cx:i.cx,cy:i.cy,r:i.r,style:e.elmDuration?{animationDuration:r+"ms"}:{}}))},p=(e,r,s,n)=>{const i=e.fn(r,s,n);return i.style["animation-duration"]=r+"ms",t("svg",{viewBox:i.viewBox||"0 0 64 64",style:i.style},t("line",{transform:"translate(32,32)",y1:i.y1,y2:i.y2}))};function m(){"undefined"!=typeof customElements&&["ion-spinner"].forEach((e=>{"ion-spinner"===e&&(customElements.get(i(e))||customElements.define(i(e),c))}))}export{l as S,c as a,m as d}