@vidal-community/vidal-web-components/vidal-reco-clic/vidal-reco-clic-loading-spinner.js

Vidal Web Components

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 { html, LitElement, css } from 'lit';
import { customElement } from 'lit/decorators.js';
let VidalRecoClicLoadingSpinner = class VidalRecoClicLoadingSpinner extends LitElement {
    constructor() {
        super();
    }
    render() {
        return html `
      <div class="loading">
        <div class="spinnerWrapper">
          <svg class="spinner" viewBox="0 0 50 50">
            <circle
              class="path"
              cx="25"
              cy="25"
              r="20"
              fill="none"
              stroke-width="5"
            ></circle>
          </svg>
        </div>
      </div>
    `;
    }
};
VidalRecoClicLoadingSpinner.styles = css `
    .loading {
      position: fixed;
      height: 100vh;
      background-color: transparent;
      z-index: 2;
      display: flex;
    }

    .loading > .spinnerWrapper {
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-content: stretch;
      align-items: center;
      width: 100%;
      height: 100%;
    }

    .loading > .spinnerWrapper > .spinner {
      animation: rotate 2s linear infinite;
      z-index: 2;
      width: 50px;
      height: 50px;
      order: 0;
      flex: 0 1 auto;
      align-self: auto;
    }

    .loading > .spinnerWrapper > .spinner > .path {
      stroke: #c0273e;
      stroke-linecap: round;
      animation: dash 1.5s ease-in-out infinite;
    }

    @-webkit-keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }

    @-webkit-keyframes dash {
      0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
      }
      50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
      }
      100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
      }
    }

    @keyframes dash {
      0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
      }
      50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
      }
      100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
      }
    }
  `;
VidalRecoClicLoadingSpinner = __decorate([
    customElement('vidal-reco-clic-loading-spinner')
], VidalRecoClicLoadingSpinner);
export { VidalRecoClicLoadingSpinner };
//# sourceMappingURL=vidal-reco-clic-loading-spinner.js.map