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

A fluid-topics loader component

import { css } from "lit";
import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
export const FtLoaderCssVariables = {
    color: FtCssVariableFactory.extend("--ft-loader-color", "", designSystemVariables.colorPrimary),
    size: FtCssVariableFactory.create("--ft-loader-size", "", "SIZE", "80px"),
};
// language=CSS
export const styles = css `
    :host {
        line-height: 0;
    }

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

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

    .ft-loader div {
        position: absolute;
        top: 37.5%;
        width: 25%;
        height: 25%;
        border-radius: 50%;
        background: ${FtLoaderCssVariables.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 * ${FtLoaderCssVariables.size}), 0);
        }
    }
`;