@ppci/custom-loader/index.js

A custom loader

import { LitElement, html } from 'lit-element';

/* Styles */
import style from './style';
import keyframes from './style.keyframes';
import sizes from './style.sizes';

export class CustomLoader extends LitElement {
  static get properties() {
    return {
      small: { type: Boolean, reflect: true },
      medium: { type: Boolean, reflect: true },
    };
  }

  static get styles() {
    return [style, keyframes, sizes];
  }

  render() {
    return html`
      <div class="loader">
        <svg class="loader-svg" viewBox="-75 -75 150 150">
          <title>Loading</title>

          <circle class="loader-stroke" cx="0" cy="0" r="37.5" />
        </svg>
      </div>
    `;
  }
}

customElements.define('custom-loader', CustomLoader);