import { r as registerInstance, h, H as Host } from './index-c94a6014.js';

const balSpinnerCss = "@keyframes spinAround{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.sc-bal-spinner-h{text-align:center;display:flex;justify-content:center;align-content:center}.sc-bal-spinner-h>div.sc-bal-spinner{width:18px;height:18px;background:#003399;border-radius:100%;display:inline-block;animation:sk-bouncedelay 1.8s infinite ease-in-out both;margin-right:5px}.sc-bal-spinner-h .bounce1.sc-bal-spinner{animation-delay:-0.32s}.sc-bal-spinner-h .bounce2.sc-bal-spinner{animation-delay:-0.16s}.is-inverted.sc-bal-spinner-h>div.sc-bal-spinner{background:#ffffff}.is-small.sc-bal-spinner-h>div.sc-bal-spinner{width:12px;height:12px}@-webkit-keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}";

const Spinner = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * If `true` the component can be used on dark background
     */
    this.inverted = false;
    /**
     * If `true` the component is smaller
     */
    this.small = false;
  }
  render() {
    return (h(Host, { class: { 'is-inverted': this.inverted, 'is-small': this.small } }, h("div", { class: "bounce1" }), h("div", { class: "bounce2" }), h("div", { class: "bounce3" })));
  }
};
Spinner.style = balSpinnerCss;

export { Spinner as bal_spinner };
