{"size": 1635, "ext": "js", "max_stars_repo_path": "src/components/react-spinners/pulse-spinner.js", "max_stars_repo_name": "craigjennings11/wc-spinners", "max_stars_repo_stars_event_min_datetime": "2019-07-24T17:21:17.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-18T12:37:04.000Z", "max_issues_repo_path": "src/components/react-spinners/pulse-spinner.js", "max_issues_repo_name": "craigjennings11/wc-spinners", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/react-spinners/pulse-spinner.js", "max_forks_repo_name": "craigjennings11/wc-spinners", "max_forks_repo_forks_event_min_datetime": "2019-12-31T12:02:05.000Z", "max_forks_repo_forks_event_max_datetime": "2020-01-09T15:16:18.000Z"}
{"max_stars_count": 29, "max_issues_count": null, "max_forks_count": 2, "avg_line_length": 23.3571428571, "max_line_length": 81, "alphanum_fraction": 0.5455657492}
import SpinnerElement from '../SpinnerElement.js';

export class PulseSpinner extends SpinnerElement {
  static get is() { return 'pulse-spinner'; }

  static get defaults() {
    return {
      color: '#36d7b7',
      margin: 2,
      size: 15,
    };
  }

  static get observedAttributes() {
    return [
      'color',
      'margin',
      'size',
    ];
  }

  get color() { return `var(--pulse-spinner__color, ${this.props.color})`; }

  get margin() { return `var(--pulse-spinner__margin, ${this.props.margin}px)`; }

  get size() { return `var(--pulse-spinner__size, ${this.props.size}px)`; }

  style() {
    return `
      .pulse-spinner {
        display: flex;
        align-items: center;
      }

      .ball {
        animation-fill-mode: both;
        animation: pulse 0.75s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
        background-color: ${this.color};
        border-radius: 100%;
        display: inline-block;
        height: ${this.size};
        margin: ${this.margin};
        width: ${this.size};
      }

      .ball:nth-child(1) { animation-delay: 0s; }
      .ball:nth-child(2) { animation-delay: .12s; }
      .ball:nth-child(3) { animation-delay: .24s; }

      @keyframes pulse {
        0%  { transform: scale(1);   opacity: 1; }
        45% { transform: scale(0.1); opacity: 0.7; }
        80% { transform: scale(1);   opacity: 1; }
      }
    `;
  }

  template() {
    return `
      <div class="pulse-spinner">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
      </div>
    `;
  }
}

customElements.define(PulseSpinner.is, PulseSpinner);
