@rxdi/ui-kit/glow-loader/glow-loader.component.js

UI Components for building graphql-server website

"use strict";
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GlowLoaderComponent = void 0;
const lit_html_1 = require("@rxdi/lit-html");
/**
 * @customElement rx-glow-loader
 */
let GlowLoaderComponent = class GlowLoaderComponent extends lit_html_1.LitElement {
};
GlowLoaderComponent = __decorate([
    (0, lit_html_1.Component)({
        selector: 'rx-glow-loader',
        style: (0, lit_html_1.css) `
  ul {
   margin: 0;
   padding: 0;
   display: flex;
  }
  ul li {
   list-style: none;
   width: 40px;
   height: 40px;
   background: #fff;
   border-radius: 50%;
   animation: grow 1.6s ease-in-out infinite;
  }
  @keyframes grow {
   0%,
   40%,
   100% {
    transform: scale(0.2);
   }
   20% {
    transform: scale(1);
   }
  }

  ul li:nth-child(1) {
   animation-delay: -1.4s;
   background: #ffff00;
   box-shadow: 0 0 50px #ffff00;
  }
  ul li:nth-child(2) {
   animation-delay: -1.2s;
   background: #76ff03;
   box-shadow: 0 0 50px #76ff03;
  }
  ul li:nth-child(3) {
   animation-delay: -1s;
   background: #f06292;
   box-shadow: 0 0 50px #f06292;
  }
  ul li:nth-child(4) {
   animation-delay: -0.8s;
   background: #4fc3f7;
   box-shadow: 0 0 50px #4fc3f7;
  }
  ul li:nth-child(5) {
   animation-delay: -0.6s;
   background: #ba68c8;
   box-shadow: 0 0 50px #ba68c8;
  }
  ul li:nth-child(6) {
   animation-delay: -0.4s;
   background: #f57c00;
   box-shadow: 0 0 50px #f57c00;
  }
  ul li:nth-child(7) {
   animation-delay: -0.2s;
   background: #673ab7;
   box-shadow: 0 0 50px #673ab7;
  }
 `,
        template() {
            return (0, lit_html_1.html) ` <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>`;
        },
    })
], GlowLoaderComponent);
exports.GlowLoaderComponent = GlowLoaderComponent;
//# sourceMappingURL=glow-loader.component.js.map