Прелоадер

new Preloader(selectro) - Добавляет прелоадер внутри переданного селектора.

• show - показать прелоадер
• remove - скрыть прелоадер
• addContainer(tag, attrs) - добавить контейнер обертку прелоадера с переданным тегом и артибутами
• colorPreloader - цвет прелоадера

передалать на новый прелоадер

document.addEventListener("DOMContentLoaded", addStylePreloader);

function addStylePreloader() {
  document.querySelector('head').insertAdjacentHTML( 'beforeend', '<style>.preloader {display:block;width:50px;height:50px;margin: 0 auto;}</style>')
}


class Preloader {
  colorPreloader = '#51b848'
  svg = `<svg class="preloader"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 100 100"><rect width="6"height="15"x="47"y="22.5"fill="${this.colorPreloader}"rx="3"ry="7.5"><animate attributeName="opacity"begin="-0.9s"dur="1s"keyTimes="0;1"repeatCount="indefinite"values="1;0"/></rect><rect width="6"height="15"x="47"y="22.5"fill="${this.colorPreloader}"rx="3"ry="7.5"transform="rotate(36 50 50)"><animate attributeName="opacity"begin="-0.8s"dur="1s"keyTimes="0;1"repeatCount="indefinite"values="1;0"/></rect><rect width="6"height="15"x="47"y="22.5"fill="${this.colorPreloader}"rx="3"ry="7.5"transform="rotate(72 50 50)"><animate attributeName="opacity"begin="-0.7s"dur="1s"keyTimes="0;1"repeatCount="indefinite"values="1;0"/></rect><rect width="6"height="15"x="47"y="22.5"fill="${this.colorPreloader}"rx="3"ry="7.5"transform="rotate(108 50 50)"><animate attributeName="opacity"begin="-0.6s"dur="1s"keyTimes="0;1"repeatCount="indefinite"values="1;0"/></rect><rect width="6"height="15"x="47"y="22.5"fill="${this.colorPreloader}"rx="3"ry="7.5"transform="rotate(144 50 50)"><animate attributeName="opacity"begin="-0.5s"dur="1s"keyTimes="0;1"repeatCount="indefinite"values="1;0"/></rect><rect width="6"height="15"x="47"y="22.5"fill="${this.colorPreloader}"rx="3"ry="7.5"transform="rotate(180 50 50)"><animate attributeName="opacity"begin="-0.4s"dur="1s"keyTimes="0;1"repeatCount="indefinite"values="1;0"/></rect><rect width="6"height="15"x="47"y="22.5"fill="${this.colorPreloader}"rx="3"ry="7.5"transform="rotate(216 50 50)"><animate attributeName="opacity"begin="-0.3s"dur="1s"keyTimes="0;1"repeatCount="indefinite"values="1;0"/></rect><rect width="6"height="15"x="47"y="22.5"fill="${this.colorPreloader}"rx="3"ry="7.5"transform="rotate(252 50 50)"><animate attributeName="opacity"begin="-0.2s"dur="1s"keyTimes="0;1"repeatCount="indefinite"values="1;0"/></rect><rect width="6"height="15"x="47"y="22.5"fill="${this.colorPreloader}"rx="3"ry="7.5"transform="rotate(288 50 50)"><animate attributeName="opacity"begin="-0.1s"dur="1s"keyTimes="0;1"repeatCount="indefinite"values="1;0"/></rect><rect width="6"height="15"x="47"y="22.5"fill="${this.colorPreloader}"rx="3"ry="7.5"transform="rotate(324 50 50)"><animate attributeName="opacity"begin="0s"dur="1s"keyTimes="0;1"repeatCount="indefinite"values="1;0"/></rect></svg>`;

  constructor(selector) {
    this.preloader = null;
    this.container = null;
    this.selector = selector
  }

  show = () => {
    this.preloader = this.container ? this.container : this.svg;
    if (this.container) {
      this.preloader.innerHTML = this.svg
    };
    document.querySelector(this.selector).insertAdjacentHTML( 'beforeend', this.preloader )
  };
  remove = () => {
    this.preloader.remove()
  };
  addContainer = (tag, attrs) => {
    this.container = document.createElement(tag);
    for (const attr in attrs) {
      this.container.setAttribute(attr, attrs[attr])
    }
  }
}