@boligmappa/web-component-search/lib/results-table/loading-animation.js

Web component for interacting with the Boligmappa APIs

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, css, unsafeCSS, } from "lit";
import { customElement } from "lit/decorators.js";
import { darkGreen } from "../helpers/css-modules/colors";
let LoadingAnimation = class LoadingAnimation extends LitElement {
    static get styles() {
        return [
            css `
        .dots-container {
          margin: auto;
          padding: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .dot {
          border-radius: 50%;
          width: 9px;
          height: 9px;
          margin: 1px;
          background-color: var(--search-loader-color, ${unsafeCSS(darkGreen)});
          animation-duration: 0.55s;
          animation-direction: normal;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
        }
        @keyframes pulse1 {
          0% {
            transform: scale(1);
          }
          25% {
            transform: scale(0.85);
          }
          50% {
            transform: scale(0.7);
          }
          75% {
            transform: scale(0.85);
          }
          100% {
            transform: scale(1);
          }
        }
        @keyframes pulse2 {
          0% {
            transform: scale(0.85);
          }
          25% {
            transform: scale(1);
          }
          50% {
            transform: scale(0.85);
          }
          75% {
            transform: scale(0.7);
          }
          100% {
            transform: scale(0.85);
          }
        }
        @keyframes pulse3 {
          0% {
            transform: scale(0.7);
          }
          25% {
            transform: scale(0.85);
          }
          50% {
            transform: scale(1);
          }
          75% {
            transform: scale(0.85);
          }
          100% {
            transform: scale(0.7);
          }
        }
      `,
        ];
    }
    render() {
        return html `
      <div class="tablecell-container dots-container">
        <div class="dot" style="animation-name: pulse1;"></div>
        <div class="dot" style="animation-name: pulse2;"></div>
        <div class="dot" style="animation-name: pulse3;"></div>
      </div>
    `;
    }
};
LoadingAnimation = __decorate([
    customElement("loading-animation")
], LoadingAnimation);
export { LoadingAnimation };
//# sourceMappingURL=loading-animation.js.map