@fluid-topics/ft-loader/build/ft-loader.light.js

A fluid-topics loader component

"use strict";(()=>{var z=Object.create;var m=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var c=(i,t)=>()=>{try{return t||i((t={exports:{}}).exports,t),t.exports}catch(e){throw t=0,e}};var E=(i,t,e,f)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of F(t))!w.call(i,r)&&r!==e&&m(i,r,{get:()=>t[r],enumerable:!(f=k(t,r))||f.enumerable});return i};var o=(i,t,e)=>(e=i!=null?z($(i)):{},E(t||!i||!i.__esModule?m(e,"default",{value:i,enumerable:!0}):e,i));var l=c((C,p)=>{p.exports=ftGlobals.wcUtils});var d=c((G,v)=>{v.exports=ftGlobals.lit});var g=o(l());var y=o(d()),x=o(l());var h=o(d()),a=o(l()),n={color:a.FtCssVariableFactory.extend("--ft-loader-color","",a.designSystemVariables.colorPrimary),size:a.FtCssVariableFactory.create("--ft-loader-size","","SIZE","80px")},b=h.css`
    :host {
        line-height: 0;
    }

    .ft-loader {
        display: inline-block;
        position: relative;

        width: ${n.size};
        height: ${n.size};
    }

    .ft-loader div {
        position: absolute;
        top: 37.5%;
        width: 25%;
        height: 25%;
        border-radius: 50%;
        background: ${n.color};
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

    .ft-loader div:nth-child(1) {
        left: 2.5%;
        animation: appear 0.6s infinite;
    }

    .ft-loader div:nth-child(2) {
        left: 2.5%;
        animation: move 0.6s infinite;
    }

    .ft-loader div:nth-child(3) {
        left: 37.5%;
        animation: move 0.6s infinite;
    }

    .ft-loader div:nth-child(4) {
        left: 72.5%;
        animation: disappear 0.6s infinite;
    }

    @keyframes appear {
        0% {
            transform: scale(0);
        }
        100% {
            transform: scale(1);
        }
    }

    @keyframes disappear {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(0);
        }
    }

    @keyframes move {
        0% {
            transform: translate(0, 0);
        }
        100% {
            transform: translate(calc(0.35 * ${n.size}), 0);
        }
    }
`;var s=class extends x.FtLitElement{render(){return y.html`
            <div class="ft-loader">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        `}};s.styles=b;var u={"ft-loader":s};(0,g.customElements)(u);})();