`service-bus.js`

```js
// --- LOADER
const fullscreenLayoutElmId = 'fullscreen-loader-layout'

const loader = document.createElement('div')
loader.id = fullscreenLayoutElmId
loader.classList.add('sp-none')
loader.style.animation = 'fadein 0.3s linear'

const spinner = document.createElement('div')
spinner.classList.add('nw-loader')
loader.appendChild(spinner)

const body = document.getElementsByTagName('body')[0]
body.appendChild(loader)

window.addEventListener(
  'fullscreen-loader.disable',
  function () {
    const targetBox = document.getElementById(fullscreenLayoutElmId)
    if (!!targetBox) targetBox.classList.toggle('sp-none', true)
  }
)
window.addEventListener(
  'fullscreen-loader.enable',
  function () {
    const targetBox = document.getElementById(fullscreenLayoutElmId)
    if (!!targetBox) targetBox.classList.toggle('sp-none', false)
  }
)
// ---

// USAGE:
window.dispatchEvent(new Event('fullscreen-loader.enable'))
```

```css
#fullscreen-loader-layout {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;

  transition: 0.2s;
  pointer-events: none;
  animation: fadein 0.2s;
}
```

#jsVanilla #webAPI | #serviceBus #fullscreenLoader

`service-bus.js`

```js
// -- IS BROWSER TAB ACTIVE
document.addEventListener("visibilitychange", function() {
  // If false - than browser tab is active
  console.log(document.hidden);
});
// --
```

serviceBus

#jsVanilla #webAPI | #serviceBus #fullscreenLoader

#jsVanilla #webAPI | Is browser tab active #serviceBus