import { customElement , LitElement , html , property , TemplateResult } from 'lit-element' ; import style from './belle-spin-css' ; element cssprop cssprop @ customElement ( 'belle-spin' ) export class BelleSpin extends LitElement { static styles = style ; type { boolean } attr @ property ( { type : Boolean , reflect : true } ) spinning = true ; render ( ) { return html `
      <div class="spin-wrapper">
        <div class="spin-spinning">
          ${ this . renderSpin ( 8 ) }
        </div>
      </div>
    ` ; } protected renderSpin ( length ) { const bubbles = [ ] ; for ( let i = 0 ; i < length ; i ++ ) { bubbles . push ( html `
        <div class="bubble-container">
          <div class="bubble"></div>
        </div>
      ` ) ; } return html `
      <div class="spin-container">
        ${ bubbles }
      </div>
    ` ; } } declare global { interface HTMLElementTagNameMap { 'belle-spin' : BelleSpin ; } }