Block UI & Preloader with spin animations

_animations.scss

@keyframes block-ui-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

_block-ui.scss

.block-ui {
  cursor: default;
  position: relative;
  pointer-events: none;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.6);
    z-index: 100;
  }

  &:after {
    content: "";
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    width: 30px;
    height: 30px;
    border-left: 4px solid #311342;
    border-right: 4px solid #311342;
    border-top: 4px solid #311342;
    border-bottom: 4px solid rgb(203, 200, 198);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: block;
    //transform-origin: 50% 50%;
    animation: block-ui-spin 0.7s linear 0s infinite forwards;
    z-index: 101;
  }
}

block-ui.js

/**
 * Created by VSCode.
 * User: justlstn
 * Date: 09.07.2018
 * Time: 18:46:53
 * File: block-ui.js
 */

(function () {
    'use strict';

    var BlockUI = function (el) {

        if (typeof el === undefined) {
            throw new Error('Element to block is required')
        }
        this.init.call(this, el)

        var self = this

        var publicFunctions = {
            block: function () {
                var domEls = self.getElement(self.config.el);

                if (domEls.length === 0) {
                    throw new Error('No elements named ' + self.config.el)
                }

                Array.prototype.forEach.call(domEls, function (domEl) {
                    domEl.classList.add('block-ui')
                })

                return publicFunctions
            },
            unblock: function () {
                var domEls = self.getElement(self.config.el);

                if (domEls.length === 0) {
                    throw new Error('No element named ' + self.config.el)
                }
                Array.prototype.forEach.call(domEls, function (domEl) {
                    domEl.classList.remove('block-ui')
                })

                return publicFunctions
            }
        }
        return publicFunctions
    }


    BlockUI.prototype.init = function (el) {
        this.config = {
            el: el
        }
    }

    BlockUI.prototype.getElement = function (el) {
        return document.querySelectorAll(el)
    }

    window.BlockUI = BlockUI;
})();

/**
 * How to use it:
 *
 * var blockApp = new BlockUI("#app")
 * blockApp.block() // or
 * blockApp.unblock()
*/