<html>
  <body>
  <div id="pc-loader"></div>
  <button id="pc-loader-default" class="button">Start Loader</button>
  </body>
</html>

.pc-loader {
    color: #fff;
    position: fixed;
    box-sizing: border-box;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: 999999;
}
.pc-loader:after,
.pc-loader:before {
    box-sizing: border-box;
    display: none;
}
.pc-loader.is-active {
    background-color: rgba(0, 0, 0, 0.85);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.pc-loader.is-active:after,
.pc-loader.is-active:before {
    display: block;
}
@keyframes rotation {
    0% {
        transform: rotate(0);
    }
    to {
        transform: rotate(359deg);
    }
}

.pc-loader[data-text]:before {
    position: fixed;
    left: 0;
    top: 50%;
    color: currentColor;
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    width: 100%;
    font-size: 14px;
}
.pc-loader[data-text=""]:before {
    content: "Loading";
}
.pc-loader[data-text]:not([data-text=""]):before {
    content: attr(data-text);
}
.pc-loader[data-text][data-blink]:before {
    animation: blink 1s linear infinite alternate;
}
.pc-loader-default[data-text]:before {
    top: calc(50% - 63px);
}
.pc-loader-default:after {
    content: "";
    position: fixed;
    width: 48px;
    height: 48px;
    border: 8px solid #fff;
    border-left-color: transparent;
    border-radius: 50%;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    animation: rotation 1s linear infinite;
}
.pc-loader-default[data-half]:after {
    border-right-color: transparent;
}
.pc-loader-default[data-inverse]:after {
    animation-direction: reverse;
}
(function () {
    var pc_loader = document.getElementById("pc-loader");
    var pc_button = document.getElementById("pc-loader-default");
    var className = "pc-loader-default";
    var timer;
    var textattribute =  "data-text";
    var attrvalue = "Please do not press back button or refresh";
    pc_loader.addEventListener("click", function () {
        console.log(this.attributes);
        for (var i = this.attributes.length - 1; i >= 0; i--) {
            if (this.attributes[i].name !== "id") {
                this.removeAttribute(this.attributes[i].name);
            }
        }
        clearTimeout(timer);
    });
   
    pc_button.addEventListener("click", function () {
        pc_loader.setAttribute(textattribute, attrvalue);
        pc_loader.classList.add("pc-loader", className, "is-active");
        hideLoader(className,textattribute);
    });

    function hideLoader(param, attr) {
        timer = setTimeout(function () {
            pc_loader.classList.remove("is-active", param, "pc-loader");
            pc_loader.removeAttribute(attr);
        }, 5000);
    }

})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.