Slick loader

A slick loader to use during your AJAX calls or data processing

by Zenoo0

HTML

<link rel="stylesheet" type="text/css" href="https://gitcdn.link/repo/Zenoo/slick-loader/v1.1.20/slick-loader.min.css">
<script src="https://gitcdn.link/repo/Zenoo/slick-loader/v1.1.20/slick-loader.min.js"></script>	

<p><button id="toggle">Click to enable/disable</button></p>
<p><input type="text" id="text1" class="text" placeholder="First text line"></p>
<p><input type="text" id="text2" class="text" placeholder="Second text line"></p>

SCSS

p {
    z-index: 20000;
    position: relative;
}

JavaScript

document.getElementById('toggle').addEventListener('click', function(){
    if (SlickLoader.element.classList.contains('active')) {
        SlickLoader.disable();
    } else {
        SlickLoader.enable();
    }
});

Array.from(document.getElementsByClassName('text')).forEach(function(elem) {
    elem.addEventListener('keyup', function() {
        let text1 = document.getElementById('text1').value;
        let text2 = document.getElementById('text2').value;

        if (text1 || text2) {
            SlickLoader.setText(text1, text2);
        } else {
            SlickLoader.clearText();
        }
    });
});