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

A fluid-topics loader component

"use strict";(()=>{var g=Object.create;var f=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports);var w=(t,e,i,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of k(e))!$.call(t,r)&&r!==i&&f(t,r,{get:()=>e[r],enumerable:!(m=z(e,r))||m.enumerable});return t};var o=(t,e,i)=>(i=t!=null?g(F(t)):{},w(e||!t||!t.__esModule?f(i,"default",{value:t,enumerable:!0}):i,t));var l=p((V,c)=>{c.exports=ftGlobals.wcUtils});var d=p((C,v)=>{v.exports=ftGlobals.lit});var u=o(l());var b=o(d()),y=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")},x=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 y.FtLitElement{render(){return b.html`
            <div class="ft-loader">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        `}};s.styles=x;(0,u.customElement)("ft-loader")(s);})();