dees-catalog/ts_web/elements/dees-spinner.ts

import {
  customElement,
  html,
  DeesElement,
  property,
  TemplateResult,
  cssManager,
  css,
  unsafeCSS,
} from '@designestate/dees-element';

import * as domtools from '@designestate/dees-domtools';

declare global {
  interface HTMLElementTagNameMap {
    'dees-spinner': DeesSpinner;
  }
}

@customElement('dees-spinner')
export class DeesSpinner extends DeesElement {
  public static demo = () => html`
    <dees-spinner></dees-spinner>
    <dees-spinner status="success"></dees-spinner>
    <dees-spinner status="error"></dees-spinner>
  `;

  @property({
    type: Number,
  })
  public size = 20;

  @property()
  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
      }

      #loading {
        transition: all 0.3s;
        display: flex;
        justify-content: center;
        align-content: center;
        background: #8bc34a00;
        border: 3px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.3)')};
        border-radius: 50%;
        border-top-color: ${cssManager.bdTheme('#333', '#fff')};
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite;
      }

      #loading.success {
        border: 0px solid rgba(255, 255, 255, 0);
        background: #8bc34a;
        border-radius: 50%;
        animation: none;
        -webkit-animation: none;
      }

      #loading.error {
        border: 0px solid rgba(255, 255, 255, 0);
        background: #e64a19;
        border-radius: 50%;
        animation: none;
        -webkit-animation: none;
      }

      @keyframes spin {
        to {
          -webkit-transform: rotate(360deg);
        }
      }
      @-webkit-keyframes spin {
        to {
          -webkit-transform: rotate(360deg);
        }
      }

      #loading .checkmark {
        display: inline-block;
        width: 22px;
        height: 22px;
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);
      }

      #loading .checkmark_stem {
        position: absolute;
        width: 3px;
        height: 9px;
        background-color: #fff;
        left: 9px;
        top: 5px;
      }

      #loading .checkmark_kick {
        position: absolute;
        width: 3px;
        height: 3px;
        background-color: #fff;
        left: 6px;
        top: 11px;
      }

      #loading.disabled .checkmark_stem,
      #loading.disabled .checkmark_kick {
        background-color: ${cssManager.bdTheme('#333', '#fff')};
      }
    `,
  ];

  render() {
    return html`
      <style>
        #loading {
          width: ${this.size}px;
          height: ${this.size}px;
        }
      </style>
      <div class="${this.status}" id="loading">
        ${this.status === 'success' || this.status === 'error'
          ? html`
              <span class="checkmark">
                <div class="checkmark_stem"></div>
                <div class="checkmark_kick"></div>
              </span>
            `
          : null}
      </div>
    `;
  }
}