Loading (JS + CSS)

Como Usar

loadingScreen.setColor('LIGHTSLATEGRAY');
loadingScreen.show();

JS

let loadingScreen = (function () {
  let _container, _circle;
  let _color = 'blue';
  let _style = document.createElement('style');
  _style.innerHTML = `
    #LOADING-SCREEN.loading-background {
      background-color: rgba(255, 255, 255, 0.85);
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0px;
      left: 0px;
      height: 100vh;
      width: 100vw;
      z-index: 1010;
      transition: opacity .5s ease-in-out;
    }
    
    #LOADING-SCREEN.loading-background.hide {
      opacity: 0;
      pointer-events: none;
    }

    #LOADING-SCREEN .icon {
      border-radius: 50%;
      border-style: solid;
      border-width: 10px;
      border-color : transparent;
      width: 120px;
      height: 120px;
    }
    
    #LOADING-SCREEN .spin {
      animation: spin 2s linear infinite both;
    }

    @keyframes spin {
      0% {transform: rotate(0)}
      100% {transform: rotate(360deg)}
    }
    `;
  document.head.appendChild(_style);

  let show = function () {
    if (_container) {
      _container.classList.remove('hide');
      return;
    }
    _container = document.createElement('div');
    _container.id = 'LOADING-SCREEN';
    _container.classList.add('loading-background');

    _circle = document.createElement('div');
    _circle.classList.add('icon');
    _circle.classList.add('spin');
    _circle.style.borderBottomColor = _color;

    _container.appendChild(_circle);
    document.body.appendChild(_container);
  };

  let hide = function () {
    _container.classList.add('hide');
  };

  let isVisible = function () {
    return !_container.classList.contains('hide');
  };

  let setColor = function (color) {
    _color = color;
    if (_circle) {
      _circle.style.borderBottomColor = _color;
    }
  };

  return {
    setColor,
    show,
    hide,
    isVisible
  };
})();